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INTRODUCTION — CONCEPT OF WWW, INTERNET 
ANDWWW O OSSO 


"o 


Q.1. Discuss in brief the history of WWW. 
Or 


Define WWW. (R.GP.V., June 2016) 


Ans. The term WWW refers to a set of Internet protocols and software, 
which together present information to a user in a format called as hypertext. 
The WWW became popular in mid 1990. Tim Berners-Lee did the primary 
work in the development of the WWW at the European Laboratory for Particle 
Physics (CERN). The original motivation for the development of the WWW, 
also known as the Web, was to try and improve the CERN's research-document 
handling and sharing mechanisms. CERN was connected to the Internet for 
over two years, but the scientists were finding for better ways of circulating 


their scientific papers and information among the high-energy physics research 
world. 


Ina couple of years time, Berners-Lee developed the necessary software 
application for a hypertext server program, and made it available as a free 
download on the Internet. This paved the way for the popularity of the Web. 
This system of hypertext documents called the World Wide Web (WWW). 
The Web became popular among the scientific community in a short span of 
time. However, the problem with the Web was the lack of availability of 
Software to read the documents created in the hypertext format, for the 
general public. 


In 1993, Marc Andreessen and his team, at the University of Illinois, 
Wrote a program known as Mosaic. The Mosaic could read a document created 
using the hypertext format, and interpret its contents, so that they could be 
displayed on the user's screen. This program, later called as the world's first 
Web browser, opened the gates of the Web for the general public. 
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Q.2. Write the features of WWW. 

Ans. The web is one of the most flexible and exiting tools in existence for 
surfing the Internet. The WWW made it possible for a site to set up a numbe; 
of pages of information containing text, pictures, sound and even video with 
embedded links to other pages. For example, a company has a home page 
with entries pointing to other pages for product information, price lists, sales. 
technical support, communication with employes stockholder information and 
so on. Basic features of the web are as follows — 


(i) Hypertext Information System — The hypertext is that instead 
of reading text in a rigid, linear structure. We can skip easily from one point to 
another. 


(ii) Graphical and Easy to Navigate — One of the best parts of the 
web is its ability to display both text and graphics in full colour on the same 
page. Before the web, using the Internet involved simple text only we. 
The interface to all this is easily navigable just jump from link to link, fro; 
page to page, across sites and servers. | 


(iii) Cross-platform — The WWW is not limited to any one kind o 
machine, or developed by any one company. The web is entirely cross-platform 


(iv) The Web is Distributed — The web is successful in providing so 
much information is distributed globally across thousands of web sites, each 
of which contributes the space for the information it publishes. | 

(v) The Web is Dynamic — Because information on the web is 
contained on the site that published its, the people who published it in the first 
place can update it at any time. 


Q.3. What do you mean by Internet ? Give brief history of Internet. 


(R.GP.K, June 2011) 

Ans. A network is a group of connected communicating devices such as 
computers and printers. An internet (the lowercase letter i) is two or more 
networks that can communicate with each other. The most notable Internet i$ 
called the Internet (uppercase letter T), a collaboration of more than hundreds 
of! thousands of interconnected networks. Private individuals as well as various 
organizations like government agencies, research facilities, corporations 
schools, and libraries in more than 100 countries use the Internet. Millions of 
people are users. 
In the mid 1960s, mainframe computers in research organizations Were 
stand-alone devices. Computers from different manufacturers were unable 
to communicate with one another. The Advanced Research Projects Agent), 
(ARPA) in the Department of Defense (DoD) was interested in finding à 
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way to connect computers so that the researchers they funded could share 
their findings, thereby reducing costs and eliminating duplication of effort. 

In 1967, at an Association for Computing Machinery (ACM) meeting, 
ARPA presented its ideas for ARPANET, a small network of connected 
computers. The idea was that each host computer would be attached to a 
specialized computer, called an Interface Message Processor (IMP). The IMPs, 
in turn, would be connected to one another. Each IMP had to be able to 
communicate with other IMPs as well as with its own attached host. 

By 1969, ARPANET was a reality. Four nodes, at the University of 
California at Los Angeles (UCLA), the University of California at Santa Barbara 
(UCSB), Stanford Research Institute (SRI), and the University of Utah, were 
connected through the IMPs to form a network. Software called the Network 
Control Protocol (NCP) provided communication between the hosts. 

In 1972, Vint Cerf and Bob Kahn, both of whom were part of the core 
ARPANET group, collaborated on what they called the Internetting project. 
Cerf and Kahn’s landmark 1973 paper outlined the protocols to achieve end- 
to-end delivery of packets. This paper on transmission control protocol (TCP) 
included concepts such as encapsulation, the datagram, and the functions of a 
gateway. 


Q.4. How many types of Internet connections are available ? Describe. 
(R.GP.V., June 2011) 
Ans. The different types of Internet connections are as follows — 


(i) Dial-up Connections — The dial-up access to Internet is a popular 
method because it is cheaper. For using this access, the computer should have 
a modem to connect to the phone system and a software that uses the modem. 
This software instructs the modem to place a telephone call to the number 
provided by the ISP. Another modem answers the call by giving the connection 
at the ISP. 


Most of the ISPs provide 56 K connection. The 56 K refers to tL: 
speed with which the information from the Internet can travel down the 
phone line into your computer. The connection is established by dialing up 
to a specific ISP. 


. (ii) High Speed Connections — High speed connections provide 
information to travel quickly. A lot of Internet services work better at higher 


speeds with this connection. The basic types of high speed connections are as 
follows — 


(2) Digital Subscriber Lines (DSL) — The computer is always 
connected to the Internet with DSL. This technology sends digital data through 


the existing phone lines to carry Internet services. 
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(b) Cable — Although the same wires are used, there is ï computers in a smaller area i.e., such as an office and it provides fast 
interference to or from the telephone calls. The Internet signal is Camiedg communication between these computers. On the other hand, WAN 
the TV cable network. technologies are used for communication over longer distances. Consequently, 
(c) Satellite — This connection requires a phone line to Sen, networks become specialized entities. Moreover, a large organization having 
information. It gets data at high speed from the satellite. | diversifying needs has multiple networks. In many cases, these networks do 


| e technology in ti f the hardw. icati 
(d) Integrated Services Digital Network (ISDN) — It isa not use the same technology in terms of the hardware as well as communication 


E à : rotocols. 
international communications standard for sending voice, video, and data oy, P 


3 ; Consequently, a computer can only communicate with other computers 
diptálielephoneilinesiorovennormalteleghoně THES, attached rte ane | ies As dere oa more organizations had coultile 
computer networks in the 1970s, this became a major issue. Computer networks 

Ans. The Internet is a worldwide network of computer networks. Itj became small islands. In many cases, an employee had to physically move for 
organized to form a hierarchy that makes it very simple to understand an using computers connected to different networks. For example, to print a 


Q.5. Explain the Internet hierarchy in brief. 


operate. Fig. 1.1 shows the different parts of this hierarchy. | document, the employee would need to use a computer that is connected to a 
print server. Similarly, for accessing a file on another network, the employee 
Very High Speed Backbone Backbone had to use a computer on that network, and so on. Obviously, this was a 

(MCl-operated) 


nuisance. This affected the productivity because people did not like to move 
around for performing trivial tasks. 

NetworkAccess | As a result, the concept of universal service came into being. In simple 
Provider s (NAP) | terms, it means that there was no dependence on the underlying physical 
| technology, or on the fact that there were many separate physical networks. 
Internet Service | Like a telephone network, people wanted a single computer network in their 
Providers (ISP) | organization. A user should be able to print a document or send a message to any 
other user from his computer, without needing to use a separate computer on 
another network for these tasks. To achieve this, all computer networks should 
be connected together. It means that there should be a network of physical 


New York 
(Sprint) 


End Users separate networks. This forms the basis of Internetworking. 
Fig. 1.1 The Internet Topology Q.7. Discuss how a user gets connected to the Internet using an ISP ? 
^t the top, there is a very high-speed backbone operated by MCI and Ans. A user connects to the Internet as follows — 


the other end, there are users and businesses. There are intermediate layersi 


Network Access Providers (NAP) and Internet Service providers (ISP) 4 
shown in the figure. | 


(i) A home user dials into an Internet Service Provider (ISP), usually 
using a twisted-pair telephone connection using a modem. 


(i) The ISP, in turn, routes the call to a Network Access Provid 


Q.6. What is Internetworking ? Why is it required ? (NAD). For example, AOL has its own network of several computers spreaa 
Or all over, connected through a number of routers. This network was set up for 

" " ] lowing communication between users, who were connected to and 
Discuss the concepts of Internetwork hit 2 : E i á oe T 
pts of. MEETER v BV, Dec. 201 subscribers of AOL only. For this, AOL set up its network and enabled users 
. ep : from homes or offices to be connected to the AOL network for a fee. Thus 
And When two or more devices have to be conne: : 


: k cted for sharing data! two users connected to AOL could send emails using AOL’s network and the 
resources or exchanging messages, we call it networking. When two netwo! email software. In a sense, AOL was competing with the Internet However, 
2 > 


need to be connected for the same purpose, we call it Internetworking. considering the growth and the popularity of the Internet, AOL decided to 


The main reason for having an Internet is that each computer network! cooperate with the Internet. This means that anybody connected on the AOL 
designed with a specific task in mind. For example, a LAN is used to conne ` ` R ES eE 
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network should now be able to access the Internet or send an email to the on 
who is not on the AOL network, but who is on the Internet. Now, the sa 

AOL has become an ISP. Thus, a message 1s accepted by this network ati 
specific access point from the ISP and carried through the network, as Show, 
in fig. 1.2. At another access point, it is transferred to the network of the NA} 
at a specific access point. 


MCI | 
Backbone 


NAPs 


ISPs 


Users | 
Í 


Fig. 1.2 A Detailed Look at NAP and ISP 


An important aspect is to connect these NAPs to one another to alloy 
sending messages from one computer to any other. Finally, a high-speel 
backbone was conceived and operated by MCI. On this backbone, specifil 
points were identified as Network Access Points, Any Network Access Provide 


had to connect to one of the (ideally the nearest) Network Access Points of 
‘he backbone. 


Instead of AOL, if we imagine any other ISP, the general principles will sil 
apply. A home user or an office dials into the ISP. The ISP connects to one of tht 
Network Access Providers, which in turn, connects to the high-speed backbon 
at a convenient Network Access Point. This completes the circuit. Now, the usd 
can send or receive any message to anyone else connected to the Internet. | 


Q.8. What are the problems involved in Internetworking ? | 


Ans. It is well to think of a network of computer networks or an Internal 
heory. However, one must also remember that organizations invest 4 


| 


in t 
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much when they build computer networks in terms of cost as well as 
infrastructure (such as cabling, providing space in the building for it, etc.). 
Therefore, they would want to reuse their existing infrastructure rather than 
creating everything from scratch. However, there are problems in this. 
Electrical as well as software incompatibility makes it impossible to form a 
network merely by Interconnecting wires from two networks. For example, 
one network could represent a binary 0 by — 5 volts, whereas another network 


| could represent it by + 5 volts. Similarly, one network could use a packet 


size of say 128 bytes, whereas another could use 256 byte packets. The method 
of acknowledgement or error detection/recovery could also be entirely different. 
There could be many more such differences like routing algorithms etc. 


Thus, any two networks cannot directly communicate with each other 


by just connecting a wire between them. Since there are many incompatible 
networking technologies, the problem becomes more severe. An organization 


| could have many networks of different types. This means that there is a large 


amount of disagreement between the networks in terms of signaling, data 
representation, and error detection/recovery etc. Hence, the concept of universal 
service through internetworking is not simple to achieve, although it is highly 
desirable. 


^93. Explain Internet architecture and its protocol. (R.GP.V., June 2011) 


Ans. In Internet architecutre, a client at home calls his or her ISP over a 
dial-up telephone line, as depicted in fig. 1.3. The modem is a card within the 


Regional ISP 


Telephone 
System 


Fig. 1.3 Internet Architecture 
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PC that converts the digital signals produce bythiecomparento analog Signal (worked computers made up of millions of public and private networks. 
over the telephone system. These signals are transmitted to the ISP's pg This network supports a wide variety of interconnections and communications 
(Point of Presence), where they are extracted from the telephone system àn| between its devices. On the other hand, the World Wide Web is one set of | 
inserted into the ISPs regional network. software services running on the Internet. It is an array of text documents and 
The regional network of the ISP consists of interconnected routers in thy Web resources created using various programming languages. The Web uses 
different cities. If the packet to be sent for a host served directly by the ISP, th, HTTP and TCP/IP to communicate and transmit data. 
packet is delivered to the host. Otherwise, it is given to the ISP’s backboy 
operator. However, several backbones exist in the world, so a packet may hay, 
to go to a competing backbone. All the major backbones connect at the NAPs {j 
permit packets to hop between backbones. ANAP is a room full of routers, 
least one per backbone. All the routers are connected by a LAN in the room, s 
packets can be transmitted from any backbone to any other backbone. 
Protocols — Protocol is a set of rules or an agreement that specifies į 
common language that computers on a network use for communication will 


HTTP PROTOCOL — REQUEST AND RESPONSE, WEI 


BROWSER AND WEB SERVERS 


Q.11. What is HTTP ? Explain the significance of this protocol. 
(R.GP.V., June 2012) 


Ans. The Hypertext Transfer Protocol (HTTP) is a protocol used mainly 
| to access data on the World Wide Web. The protocol transfers data in the 


other computers. It also specifies the conditions under which a parti rae aT, 
p p particula orm of plain text, hypertext, audio, video, and so on. However, it is called the 


message should be sent or responded and the particular method of doing it f + : ; : 
They give the specification on how the computers talk with each other. | Hypertext Transfer Protocol because its efficiency allows its use in a hypertext 


There are various protocol suites — | environment where there are rapid jumps from one document o enolhes 

(0 Ethernet — This i d tojtransfer dink " | HTTP functions like a combination of FTP and SMTP. It is similar to FTP | 
specifies a aumber of witi E io i eas = iniormaton. on a. LAN. | because it transfers files and uses the services of TCP. However, it is much — | 
p iring and signaling standards for the physical layı simpler than FTP because it uses only one TCP connection. There is no separate 


two ways of network access (Media Access Control/Data Link Layer) and Í control connection, only data are transferred between the client and the server. 


common address format. 
m . HTTP is similar to SMTP because the data transferred between the client 
(ii) Internet Protocol (IP) — This protocol is used to providi and the server looks like SMTP messages. In addition, the format of the 
communicable global addresses of/to the computers. The computers identi messages is controlled by MIME-like headers. However, HTTP differs from 
each other by the IP addresses. SMTP in the way the messages are sent from the client to the server and from — 

. (iii) Transport Control Protocol (TCP) — This protocol guarantei the server to the client. Unlike SMTP, the HTTP messages are not destined to 

reliable, proper delivery of data from the sender to the receiver. It breaks largi be read by humans, they are read and interpreted by the HTTP server and — 
messages, transports them reliably, and reassembles them. HTTP client (browser). SMTP messages are stored and forwarded, but the — 


(iv) File Transfer Protocol (FTP) — This protocol is used to conned ne ases are delivered immediately, X 


two computers over the Internet so that the user of one computer can transfet Q:12. What is Hyper Text Transfer Protocol (HTTP) ? Explain the 1 
files and perform file commands on the other com: | features of HTTP protocol. (R.GP.V., June 2011, Dec. 2015) 


puter. It exchanges files 

over any network that supports TCP/IP protocol, " | Ans. HTTP. Refer to Q.11 

(v) Hypertext Transfer P t i H | ‘ a. a 

Viu Web parcs otra z A i a du (HTTP) — This protocol is used Features of HTTP — HTTP has the following set of characteristics — _ 

(vi) Simple Mail : . | (i) Application Level — HTTP operates at the application level. It 
iple Mail Transfer Protocol (SMTP) — This protocol is 4 assumes a reliable, connection-oriented transport protocol such as TCP, but 


for email transmissions 
aus 7 does not provide reliability or retransmission itself. 
10. Di j d M , 
pi Ii Pino i and WWW. (R.GPK, June 2018, .. (ii) Request/Response — Once a transport session has beer 
a ^ : e Internet, linking your computer to other computers around thé Sete, one side (usually a browser) must send an HTTP request to whic! 
5 way of transporting content. It is a colossal interconnection 9! HOME sideiresponds: 


| 
:] 
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; h h tracted from the teleph 9] This network supports a wide variety of interconnections and communications 
(Point of Ls ere t Y si e e e telephone system a between its devices. On the other hand, the World Wide Web is one set of 
inserted into the ISPs regional network. I ; software services running on the Internet. It is an array of text documents and 
The regional network of the ISP consists of interconnected routers in t Web resources created using various programming languages. The Web uses 
different cities. If the packet to be sent for a host served directly by the ISP, th HTTP and TCP/IP to communicate and transmit data. 


packet is delivered to the host. Otherwise, it is given to the ISP’s backbon, 


operator. However, several backbones exist in the world, so a packet may ha À oi ES 
to go to a competing backbone. All the major backbones connect at the NAPs t HTTP PROTOCOL — REQUEST AND RESPONSE, WE 


permit packets to hop between backbones. A NAP is a room full of routers, — sr ODE aspect pane n N 
least one per backbone. All the routers are connected by a LAN in the room, s 
packets can be transmitted from any backbone to any other backbone. Q.11. What is HTTP ? Explain the significance of this protocol. 


Protocols — Protocol is a set of rules or an agreement that specifies ; (R.GE, June 2012) 
common language that computers on a network use for communication will Ans. The Hypertext Transfer Protocol (HTTP) is a protocol used mainly 
other computers. It also specifies the conditions under which a particula t° access data on the World Wide Web. The protocol transfers data in the 
message should be sent or responded and the particular method of doing it form of plain text, hypertext, audio, y deo, and paneer However m called the 
They give the specification on how the computers talk with each other. | Hypertext Transfer Protocol because its efficiency allows its use in a hypertext 

There are various protocol suites — | environment where there are rapid jumps from one document to another. 

HTTP functions like a combination of FTP and SMTP. It is similar to FTP 
because it transfers files and uses the services of TCP. However, it is much 
simpler than FTP because it uses only one TCP connection. There is no separate 
control connection, only data are transferred between the client and the server. 
" : HTTP is similar to SMTP because the data transferred between the client 

(i) Internet Protocol (IP) — This protocol is used to providi and the server looks like SMTP messages. In addition, the format of the 
communicable global addresses of/to the computers. The computers identi messages is controlled by MIME-like headers. However, HTTP differs from 
each other by the IP addresses. | SMTP in the way the messages are sent from the client to the server and from 

(iii) Transport Control Protocol (TCP) — This protocol guarantei the server to the client. Unlike SMTP, the HTTP messages are not destined to 
reliable, proper delivery of data from the sender to the receiver. It breaks larg be read by humans, they are read and interpreted by the HTTP server and 
messages, transports them reliably, and reassembles them. HTTP client (browser). SMTP messages are stored and forwarded, but the 


; i lH A : is 
(iv) File Transfer Protocol (FTP) — This protocol is used to conned TTP messages are delivered immediately. 


two computers over the Internet so that the user of one computer can transfe Q:12. What is Hyper Text Transfer Protocol (HTTP) ? Explain the 
files and perform file commands on the other computer. It exchanges files features of HTTP protocol (GEM, dune 2011, Dec 2015) 


over any network that supports TCP/IP protocol. | — Ans. HTTP - Refer to Q.11. 
(v) Hypertext Transfer Protocol (HTTP) — This protocol is usel Features of HTTP — HTTP has the following set of characteristics — 


to retrieve Web pages from a We 
(vi) j^ : : a Wobiservdg | (i) Application Level — HTTP operates at the application level. It 
fórémsil t imple Mail Transfer Protocol (SMTP) — This protocol is used assumes a reliable, connection-oriented transport protocol such as TCP, but 
ai! transmissions, does not provide reliability or retransmission itself. 


(i) Ethernet — This is used to transfer information on a LAN. | 
specifies a number of wiring and signaling standards for the physical layı 
two ways of network access (Media Access Control/Data Link Layer) andl 
common address format. 


9.10. Differentiate Internet and WWW. (R.GPV., June 2016) (ii) Request/Response — Once a transport session has been 
Ans. The Internet, linkin g your computer to other Siam atoi | established, one side (usually a browser) must send an HTTP request to which 


world, i ` the other si l 
» 15 a way of transporting content. It is a colossal interconnection d S side responds 


| 
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HTTP request is self-contained, 


The Seng 


(iii) Stateless — Each 


1 history of previous requests or previous Sessions, 
a history 


does not keep 
(iv) Bi-directional Transfer — Mostly, 


a browser requests a We 
opy to the brow 


er, HTTP also allows transfy 


page, and the server transfers ac 
from a browser to a server. 

(v). Capability Negotiation - H TTP allows brow sers and sery 
as the character set to be used during transfers, 4 


to negotiate details such | 
" and a receiver can specify the 


sender can specify the capabilities it offers 
capabilities it accepts. 

(vi) Support for Caching — To improve response time, a browse 
caches a copy of each Web page it retrieves. If a user requests a page again 
HTTP allows the browser to interrogate the server to determine whether th 


contents of the page has changed since the copy was cached. 


(vii) Support for Intermediaries — HTTP allows a machine along the 
path between a browser and a server to act as a proxy server that caches Wet 
pages and answers a browser's request from its cache. 


Q.13. Discuss various HTTP commands. 


dns. A few commands in the HTTP protocol when a client requests | 
server for a Web page are as follows 1 


() GET — ^ browser uses this command for requesting a Wet 
server, for sending a particular Web page. 


(Gi) HEAD — This command does not request for a Web "- 
only requests for its header. For example, if a browser wants to know the las 


modified date of a Web page, it would use the HEAD command, rather that 
the GET command 


. (iii) PUT — This command is just opposite of the GET comman 
Rather than Tequesting for a file, it sends a file to the server for storing it there 
pereas D POST ~ This command is like the PUT command. Howed 
whereas the PUT command is used to Send a new file, the POST commands 
used to update an existing file with additional data | 
fv) DELETE - This command allows 

request to delete a particular Web page. 
(vi) LINK — 

two pages. 


(vii) UNLINK — 
between two pages, 


a browser to send an HTI 
This command is used to establish hyperlinks betwe 


This command is used to delete existing hyperlii 
. 3 
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Q. 14. Why is HTTP known as stateless protocol ? Describe any three 
HTTP commands. (R.GP.K, June 2010) 
Ans. HTTP as a Stateless Protocol — The HTTP software on the Web 
server terminates the TCP connection between itself and the client. Therefore, 
HTTP is called as stateless protocol. The TCP connection between the client and 
the server is established for every page, even if all the pages requested by the 
client reside on the same server. Moreover, if the Web page contains images, a 
separate file is required, which stores it in specific formats. Therefore, if a Web 
page contains text, sound, and image, it will take three HTTP requests to locate 
and bring three files residing on the same or different servers to the client, after 
which the browser on the client can compose these together to display that Web 
page. This involves a DNS search as many times as well. This is the reason why 
retrieving a Web page that contains many graphical elements is very slow. 
Thus, HTTP does not remember anything about the previous request. It 
does not maintain any information about the state, and hence the term stateless. 
HTTP Commands — Refer to Q.13. 


Q.13. Explain basic elements of hypertext documents. 

(R.GP.K., June 2013) 

Ans. The elements of hypertext are nodes, links, buttons, trails, navigational 
tools, browsers, and editors. 

Nodes — A node is a collection of data organized around a specific topic. 
This node is linked to another node, forming a network. 

Links — Links are almost always anchored in at their departure point to 
provide users with some explicit object to activate in order to follow the link. 
he destination point is reached by activating the anchor. 

Buttons — Button is a visual cue in a node that alerts a user that a link is 
existing. By clicking or pressing button, the user is activating the link. 

Editor — Editor is used in order to create a hypertext page/node. Editor is 
part of the hypertext system that enables user to create a node and link it into 
the network. Sometimes editor is not included in the hypertext systems, because 
the system is merely a presentation-only system. 

Navigational Tools — 

(i) Browser lt is program or subprogram that can display a diagram 
of a network of nodes. 

(ii) Maps — Map is tracking all of the documents or nodes linked to 
the current document which is dynamically updated. 

(iii) Overview Diagrams 
serve as anchors for local overvie 


They can provide an overall view and 
diagrams. 


14 Internet and Web Technology 


(iv) Trails — ^ trail is a record of the nodes that a user has accessej 


in viewi rtext network. i 
i net panne are any information related to the component 

(vi) Presentation Specifications — They contain information on hoy 
the component is displayed. They may include Men cde Piin number 

i i i indow to be displ 

of colors to display a gif file, the size of the win splayed, thy 
location of the window, etc. . | 
wo properties of an anchor-anchor id E. 


e t 
(vii) Anchor — There are t | 
an anchor value. The anchor value is used to locate a part of the content of the 


component. | 

Q.16. Explain the HTTP request and response model with the help of 
an example. . | 

Ans. Consider, for an example, the browser retrieves a HTML document 
from the Web server. Also, assume that the TCP connection between the 
client and the server is already established. | 

Fig. 1.4 shows the client sends a GET command to retrieve an image 
with the patl/files/new/imagel. It means that the name of the file is imagel, 
and it is stored in the files/new directory of the Web server. Instead, the Web 
browser could have, of course, requested for an HTML page. | 


—_— 


Request 
GET/files/new/imagel HTTP/1.1 
Accept: image/gif 

Accept: image/jpeg 


HTTP/1.1 200 OK 


Date: Tue, 19-12-00 15:58:10 GMT 
Server: MyServer 
Content-length: 3010 


(Actual data for the image) 


Fig. 1.4 = HTTP Request and Response Interaction 
etween a Web Browser and a Web Server 


In response, the Web se 
? TVer sen 
which means that the re = 
data, as requested. 


appropriate return code of 200, 
quest was successfully processed, also the imag 


Possum sine Tequest with the GET command. Also, it sends tw 
using tw . > j 
£ two accept commands. These parameters spec! l 


| my/file. 
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that the browser is capable of handling images in the GIF and JPEG format. 
Therefore, the server should send the image file only if it is in one of these 
formats. 

In response, the server sends a return code of 200 (OK). It also sends the 
information about the date and time when this response was sent back to the 
browser. The server's name is the same as the domain name. Finally, the 
server indicates that it is sending 3010 bytes of data. This is followed by the 
actual data of the image file. 


Q.17. Write some limitations of HTTP. 


Ans. Some limitations of HTTP are as follows — 

(i) HTTP is designed for client-server communication that follows 
the request response pattern. This simple model is a major key to its success. 
However, it does not solve all problems related to Internet communication. 

(ii) By adhering clearly to the request-response pattern, HTTP is a 
stateless protocol. A common pattern in Web communication is that a client 
repeatedly interacts with the same server. Seen at the HTTP level, this is just a 
sequence of independent request-response interactions that happen to be between 
the same client and server. Persistent connections are not the solution since 
their duration is usually limited. 

(iii) TCP/IP, and thereby also HTTP, are by themselves inherently 
insecure protocols. 


Q.18. How do you use HTTP client for sending request ? Write an 
example program that retrives files from the URL http:/www.myaddr.net/ 


(R.GP.V, June 2013) 

Ans. The protocol used for sending the request is http. The browser 
sends the following request to the server to retrieve a document through HTTP 
— GET/request-URI HTTP/version, where version tells the server which HTTP 
version is used. 


For example, the following line is an example command sent by a browser 
to a server for obtaining a Web page file-html from the site www.myaddr.net/ 
Iny — 

GET http://www.myaddr.net/my/file.htm/HTTP/1.0 

This GET command requests the Web server at www.myaddr.net for a 

file called as file.html. 


Q9. Discuss in brief Hypertext Transfer Protocol Secure (HTTPS). 
Or 


Explain the purpose of HTTPS. (R.GP.V., Dec. 2010) 
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Ans. To prevent eavesdroppers from obtaining sensitive information, sy 
as credit card numbers, all such sensitive information should be encrypted ber Q.22. What are the advantages of customization of browsers ? 
being transmitted over any public communication network. The standard mea @-GPV, June 2012) l 
of indicating to a browser that it should encrypt an HTTP request is to use M There are many browser settings that determine how sites are | 
| 


https scheme on the URL for the request. For example, entering the URL displayed, how security measures are applied and how outputs are rendered. 
https : // www.answers.com ! Most of these settings are located in the Internet Options dialog in the Tools 


in Mozilla's address bar will cause the browser to attempt to send an encrypt menu of yee nai d ati, for normal browsing, but the 
HTTP GET request to www.answers.com. peringycae P e um ies e ar y b en 
A ; Some privacy setting for can be set under the Privacy tab. There are 
TES uos eene ec thom Snes gis : ees six levels of privacy in IE7. The most lenient level allows the downloading of 
s ck cookies. The most strict level blocks all cookies from all websites and constantly 
Layer (SSL) protocol as well as the Transport Layer Security (TLS) Protoco| ^ dotes a report to the user about browsing privacy. Using this level ma; 
which is based on SSL 3.0 to provide authentication and data encryption P nt some Web sites from working correctl ` z 
Resources to be accessed by HTTPS are identified using URIs or URLs using preve " , > a P 
the HTTPS URI schemes. Security option for IE7 browser is found under the Security tab. 
, A personal home page can be specified under the General tab in IET. 
Q.20. What is a Web browser ? | The home page is the Web page that loads when the browser is first opened 
] Ans. A Web browser acts as the client in the WWW interaction. Usinj and appears when the Home button at the top of the browser window is 
this program, a user can request for a Web page stored on a Web server. The clicked. 
Web server locates this Web page and sends it back to the client compute, History options also may be adjusted in this category. By clicking the 
The Web browser then interprets the Web page written in the HTML languagt Settings button in the Browsing history section of the General tab in IE7, 


WWW and HTTP Protocol 17 


and then displays it on the client computer's screen. | the amount of disk space to be reserved for the Web page cache can be set. 
Q.21. What are the types of browser ? | Q.23. Web browser is used for browsing Web pages. Explain major 
Ans. There are two types of browsers known as Graphical and Text. features of Internet Explorer browser of Microsoft. What is ‘history’ in IE ? 

"| Write steps to remove history pages from IE. (R.GP.V. June 2012) 


() Graphical — Graphical browsers a 
. : re the browsers that contai 
text, images, audio, and video. These all elements are retrievable through i Ans he sie eines Shree Hare 


graphical software program such as Internet Explorer, Firefox, Netscape (i) Content Advisor — Helps screen out objectionable content by using 

UM and Opera. These browsers are available for Windows, Apple, Linux industry-standard ratings that have been defined independently by the Platform — 

No nid epe lie e is accomplished by pothting and for Internet Content Selection (PICS) committee. 

i a E ighlighted words and graphics. You can install a (ii) Image Toolbar — Permits you to quickly and easily save e-mail, 
installed at the time v s ^in ien Also, these browsers get automaticallj and print your pictures from your Web page, as well as view all your saved — 
Ceo MM S. ce = r ing system installation. For example, Interne pictures in the My Pictures folder. When you point to pictures on Web — 
the Microsoft site: htt m lows operating system, and is also available on Pages, the image toolbar appears giving instant access to My Pictures - 
downloading from htt Ji Mim. Ve. 7 usus i available fo oi ; 
available from http: (iie www. mozilla.org/products/firefox/ and Safari i$ (iii) Media Bar — Provides a user interface for locating and playii 

- 3 PP ©.com/safari/. | media within the browser window. You can play music, video or mixed-med 

texton Lo Ye E Lynx isa browser that provides access to the Web in files without opening a separate window. You can also control the audio volume, 
" y mode. Navigation is accomplished by highlighti ; rds Choose which media files or tracks to play, and access different media on 
in the screen with the a ard arce your computer or on the Microsoft WindowsMedia.com Web site. ^ 


ITOW up and down keys, and th i d tures 
arrow (or ENTER) key to fi i seen m do ae f : in th v 
ray RENT ) key o follow the link. In these days of graphical browser (iv) Auto Image Resize — Resizes pic that are too large to disp! 


ve that Lynx was once very popular. | in the browser window so they fit within the dimensions of the window. 
i 
| 
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(v) Favorites — Put Web sites you visit often within easy reach, 


way, you do not have to remember or type anything. Just click your mg, 4” HTML Interpreter, Optional Interpreter, HTTP Client— A browser 
twice and there you are. As your list of favorite pages grows, you can orga contains some pieces of software that are mandatory and some that are optional 
them by moving them into subfolders. ppending on a nm int = Program and pea Fai RR program 

i 7 . ‘rina ‘are mandatory. Som interpreter programs, Java interpreter program, 
i f vi) Auto a ee ae a rahe pT a Metin q other optional interpreter program are optional. The browser also has a 
information that you have recently typed, S Sses, Informati ontroller, which manages all of them. The controller is like the control unit in 


in forms, and search queries. . computer's CPU. It interprets both mouse clicks/selections and keyboard inputs. 

(vii) History List — Makes it easy to find and return to Web sites aBased on these inputs, it calls the rest of the browser's components to perform 
pages you have visited in the past. Ihe specific tasks. For instance when a user types a URL, the controller calls 

(viii) Customizable Browsing Layout — Provides options so you ehe HTTP client program to fetch the requested Web page from a remote Web 
change your Web browsing layout to suit the way you work. Add and remoserver whose address is given by the URL. When the Web page is received, 
buttons on the toolbar, increase Web page viewing space, and create a custgthe controller calls the HTML interpreter to interpret the tags and display the 
toolbar layout. Web page on the screen. 

(ix) Manage Cookies — Help to protect your privacy online } The HTML interpreter takes an HTML document as input and produces a 
managing cookies. Internet explorer provides a range of options for acceptiformatted version of it for displaying it on the screen. For this, it interprets the 


and restricting cookies. various HTML tags and translates them into display commands based on the 
(x) Security Zones — Provide different levels of security for differ isplay hardware in the user's computer. For instance, when the interpreter 
areas of the Web to help protect your computer. sees a tag to make the text bold, it instructs the display hardware to display the 


text in the bold format. Similarly, when the interpreter encounters a tag to 


History in IE — To return to a site you visited in a i i 
. previous session, or| : : ons juncti 
a site that is many steps back from your current location, you will need to Ichange paragraphs, it performs the necessary display functions in conjunction 


Internet Explorer's history feature. EX her ii mon 
To revie i i i ; o tional Clients — Apart from the client and an interpreter, 

the History Sei accus i MR girs — we y by clicki, eer can contain additional clients. For supporting applications such as 
shows a list of pages that have b ^ e Internet Exdlorer Wingy P and email, a browser contains FTP and email client programs. These 
The top of the history expl a ke sorted by date u [hen by Sici the browsers to perform FTP and email services. The interesting point 
past week, and each a. in e. mene wer Whe the M Si date of tis that a user need not explicitly invoke these special services. Instead, the 
the history explorer bar shows the sites that you ae Y ick He... Or di browser invokes them automatically on behalf of the user. It hides these details 
day, sorted alphabetically. Clicking a site name displ b. d at week {from the user. For example, for sending an email, there would be a link on an 
list of all the pages you visited at that site. Ti ISBAYS anja phabetically soti HTML page. Usually, there is such a link on every Web site so that the user 
history explorer bar, click its title. e. To revisit a page that is listed a4 send an email to the owner or technical support staff of the Web site to 

Steps to Remove History P. 2 [resolve any queries, obtain more information, report problems, etc. 

page, a site ora date. Right-c S^ S from IE — You can delete an individu If the user clicks that link with a mouse, the controller of the browser would 
Click the Tools mena and cii item you want to delete, and choose Delet interpret this and then it would invoke the email client program automatically. 
You can remove entire browsin TA Options. The options dialog box appe Similarly, the user could just select an option on the screen to invoke the FTP 
£ history through the Internet Options dial service. That mouse click would be interpreted by the controller of the browser 


box. On the General i j 3 i $ ; 
twi hista E tab, click the Clear History button to remove entif and then it would invoke the FTP program through the FTP client program. 


0.25. Discuss the caching technique in Web browser. 
ajor components of Web browse! (R.GP.V, June 2010) 
(ii) Optional interpreter j . Ur 
(iv) Optional client. | Write the caching techniques in Web browser. (R.GP.V., Dec. 2016) 
(R.GP., June 2010) 


224. Write the role of the following m. 
(0 HTML interpreter 
(iii) HTTP client 
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Ans. Several of the response header fields are used in conjunction w 


cache control. In computer systems, a cache is a repository for co jg, an Expires time that precedes the Date value (a value of 0 is commonly used 
information that originates elsewhere. A copy of information is placed ina | for this purpose). If this is done, then an HTTP/1.1-compliant browser will 
in order to improve system performance. For example, most personal com i validate before each access to the resource. 


systems use a small, high-speed memory cache to hold copies of some off Q.26. Define Web server. Explain the various services provided by the 
data contained in RAM memory, which is slower than cache memory, Web server. (R.GP.V., Dec. 2010) 
Most Web browsers automatically cache on the client machine many, Ans. A Web server is a program that serves Web pages to the clients on 
the resources that they request from servers through HTTP. For example request. The Web server uses the client/server architecture and HTTP to service 
an image such as a button icon is included in a Web page, a copy of ij Web pages to the clients. In the client server architecture of Web server, the 
image obtained from the server will typically be cached in the client's fjserver side software that provides Web pages is called Web server. The client 
system. Then if another page at the same time uses the same image, (side software that accesses information from the Web server is referred as 
image can be retrieved from the client file system rather than sending anoth Web browser. Web server accepts the requests sent by a Web browser and 
HTTP request to the server and waiting for the server's response containij processes the requests. After processing the requests, the Web server sends 
the image. HTTP caching, when successful, generally leads to quicker disp the response back to the Web browser. 
by the browser, reduced network communication, and reduced load on ti Web servers are available in the form of packages with various operating 
Web server. ysystems, such as Linux, Unix, Windows and Novell NetWare. For example, 

However, there is a key drawback to using a cache — information in Apache is freely available Web server software while Internet Information 
cache can become invalid. For example, if the button image in the precedij Server (IIS) and Novell Web server are commercially available Web servers. 
example is modified on the server, but a client accesses its cached copy of th A Web server is needed to obtain services, such as managing file download 
older version of the image, then the client will display an invalid version of ttrequests and providing access to the Web pages stored in the Web server. The 
image. This problem can be eliminated in various ways. * [various services provided by a Web server are as follows — 

One approach to guaranteeing that a cached copy of a resource is valid; 
for the client to ask ihe server whether or not the client's copy is valid. This 
be done by sending an HTTP request for the resource using the HEAD meth 
which returns only the status line and header portion of the response. If th 
response message contains a Last-Modified time, and this time precedes th Q.27. What are Web servers ? Explain the features and characteristics 

value of | the Date header field returned with the cached resource, then the cacha used for comparison of Web servers. (R.GP¥, June 2014) 

Women em toes dhe cached oopyis valdandi ^ Ans Refer 1o Q26. 

A somewhat simpler approach = oa d " $ o | 

the resource. The client can then conde te we p^ aber EN 
ag returned by a HEA! Th 


request with i ] 
ae with the ETag stored with the cached resource. If the ETag value 


(i File Transfer — Enables file transfer over the Internet by using 
the http protocol. 


(ii) WWW- Enables accessing of Web pages hosted on Web server. 


The primary feature of every Web server is to accept HTTP requests 
m Web clients and return an appropriate resource in the HTTP response. 
is basic functionality involves a number of steps — 


with 


(i) The server calls on TCP software and waits for connection 
“request to one or more ports. 


(ii) When a connection request is received, the server dedicate a 
"subtask" to handling this connection. 


(iii) The subtask establishes the TCP connection and receives an 


the cached : , the client may ut 
Ifan ieee without the need to validate with the serve ud meses: i 
algorithm to choose au Ed uded in a response, a browser may use a heurisil (iv) The subtask examines the Host header field of the request to 


xpiration time and th en behave as if this time had bet determine which “virtual host” should receive this request and invokes software 
di for this host. 
revented by sen i 


|] 
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(v) The virtual host software maps the Request-URI field of 
HTTP request start line to a resource on the server. q 
(vi) If the resource is a file, the host software determines the My Ans. A Web server is a program running on a server computer. It consists 


type of the file, and creates an HTTP response that contains the file in , of the Web site containing a number of Web pages. A Web page constitutes a 
ial type of computer file written in a specially designed language called as 


body of the response message. spec 
(vii) If the resource is a program, the host software runs the pro Hyper Text Markup Language HEME): "ih Web page can contain text, 
PON a T . : Sa oraphics, sound, video, and animation that people want to see or hear. 

providing it with information from the request and returning the output fr 8 i " 

t The Web server constantly and passively waits for a request for a Web 
the program as the body of an HTTP response message. : i 

Sh . g age from a browser program running on the client and when any such request 
(viii) The server normally logs information about the request ay is received, it locates that corresponding page and sends it to the requesting 


response — such as the IP address of the requester and the status code oft} client computer. For this, each Web site has a server process that listens to 
response — in a plain-text file. TCP connection requests coming from different clients all the time. After a 
(ix) Ifthe TCP connection is kept alive, the server subtask continu TCP connection is established, the client sends one request and the server 

sends one response. Then the server releases the connection. This request- 


to monitor the connection until a certai i i 
sends another request, or the cli es nee "ne has elapsed, the clit; response model is governed by the Hyper Text Transfer Protocol (HTTP). 
quest, or the client initiates a connection close. For instance, HTTP software on the client prepares the request for a Web 

All modern servers can concurrently process multiple requests. It is asi page, whereas the HTTP software on the server interprets such a request and 

multiple copies of the server were running simultaneously, each devoted i prepares a response to be sent back to the client. Hence, both client and server 

handling the request received over a single TCP connection. | computers need to have HTTP software running on them. 

Q.30. What is the difference between Web site and Web server ? 

Ans. A Web site is a site intended for use by humans. It must have a user 


Ans. Working of Web — The model of Web communication Color friendly interface, must be able to interact witha human being. A Web service is 
to client server communication. The client is the Web browser such 4° service intended for use by another program, via Web. One program interacts 
ane 1 to another via its Web service port. Google search may be use in both forms. 


Netscape oi i 

Wt aer enabler andthe sever is the Web Serer where request You ean use directly or you can write a small program t call the search Web 
document link. The browser reads the URL of the link ant x d pccsc qmi iPad aia et ae 
aed = of the URL. The client contacts the Web server and request 
me ine. The server retrieves the file from its storage device. If no filenam 
Is given, default page (usually the home page) is retrieved. If the file ist 
p the program is run on the server. If the file contains images, thost 
re also retrieved, one by one. The server sends the results of the reques 


the Web browser, usually i 
E y in the form of 
browser reads the HTML codes, formats ccc ent The WA 


displays the results for the user to see. 
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Q.29. How does a Web server work ? 


Q.28. How does the Web work ? Give two examples of Web servers. 
(R.GP.X.,, June 2012 


Q.31. How does a Web browser interact with Web server ? 
Ans. A typical interaction between a Web browser and a Web server is as 
shown in fig. 1.5 and explained below. 


1. Web Browser 
Requests for the File 
wwwyyahoo.com/index 


2. Web Server 
Sends the File 
www.yahoo.com/index 


the document and images, and 


Ended EWES 3. Web Browser Interprets 
of We z | the File and Displays it 
erver— Apache and IIS (Internet Information Serve!) Contents en Sees > 


are the twi 

ue T = rica Web servers. They have Web containers, namely Tomcil 
s Sa E e Temsi is used for Java-based server-side technologies, like 
idindlogics t red While, Microsoft's IIS is used for Microsoft-bastl (i) The user on the client co! 
pane ASENST. | the domain name of the Web server that 


File 
b Browser and a Web Server 


Fig. 1.5 Interaction between a We 
mputer types the full file name including 
hosts the Web page needed. This name 
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M» 3 Web browser program running : 
is typed on a screen provided by the à on (xiii) The HTTP software on the Web 

y ? d ; Loc e b server now hands over this 
computer. This full file name is known a Uniform Resource Locator (Up HTTP respon 


se to the TCP IP software running on the Web 
ee iS f ? address corresponds MSN qi — 
(ii) The browser requests DNS for the IP address c responding (xiv) The TCP IP software renning on the Web server splits the HTTP 
www.yahoo.com Í response into packets and sends it over til CP connection to the client. As 
(iii) DNS replies with the IP address for www.yahoo.com in soon as all packets have been transmuted correctly to the client, the TCPAP 
120.10.23.21) Í software on the Web server informs the WEIP software on the Web server 
(iv) The browser makes à TCP connection with the compa 


(xv) The TCP/IP sofiware ön the Ghent checks the packets for 
120.10.23.21. ] correctness and reassembles thém to fr the orignal Web page on the HTML 
(v) The client makes an explicit request for the Web page (ing format. Now. it informis the HTTPsofta agg oo the sen er that the Web page 
case, the file corresponding to the page index at yahoo.com) to the Web sen was received correctly. 
using HTTP request. The HTTP request is a series of lines, which apart fs (xvi) Now, the H'EEP software on the Web server terminates the 
other things, contains two important statements, GET and HOST, as hoy TCP connection Heen it«cHügndiclient. Therefore. HTTP called is referred 
with our current example. eas stateless protocol. 
GET/index.htm 1 (xvii) The TCP/IP Software on the chent now hands over the Web 
Host : yahoo.com page touth@yWeb Browser for interpretation. It is only the browser, which 
The GET statement indicates that the index.htm file 1s to be r undegstands the "HTML code language” to decipher which elements (text, 
The Host parameter indicates that the index file is to be retrieved from vided. photo) should be displayed where and how 
domain yahoo.com. 0.32. What is HS ? 
(vi) The request is handed over to the HTTP software nu Ans. Internet Information Services (IIS) help network administrators to 
the client machine to be transmitted to the server. erate, manage, and control access to Web sites. In Windows Server 2008, 
(vii) The HTTP software on the client now hands over the TIS-wersion 7 has come as built-in feature and generally referred 10 as Web 
request to the TCP/IP software running on the client. y server. HS comprises of different types of services, which help network 
(viii) The TCP/IP software running on the client splits the administrators to cfficiently manage Web site. For example, the Fic Transfer 


request into packets and s T s aA T hi Protocol (FTP) service provided by the IIS is used to 
C stie, Mme An files from the server. The Simple Mail Transfer Protocol (SMTP) service 


provided by the HS allows users to exchange e-mails. Apart from services 
HS is smoothly integrated with ASP.NET feature. The sew ASPNET feature 
is the Web application framework, which is developed by the Microsoft and 
used to build dynamic Web sites and Web applications 


Q.33. Discuss in brief the services supported by IIS 7. 
Ans. IIS 7 Web server provides the better platform for the services that 
includes 
(i) ASP.NET Service - Active Server Pages using the Microsoft. Net 
framework is a method of creating dynamic elements, such 4s clicking and 
loading, on Web pages. ASP.NET allows a Web page to respond to a user's 
actions, such as loading the pages or clicking an object on the page. It also 
handles and authenticates the Web page forms. 
(ii) The File Transfer Protocol (FTP) Publishing Service — 
Microsoft has created and released a new FTP service for Windows Server 


joad and download 


(ix) The TCP/IP software running on the Web server r 
the HTTP request using the packets received and gives it to the HTTP 
running on the Web server (in this case, yahoo.com). 


(X) The HTTP software running on the Web server inte 


a hia ps It De that the browser has asked for the file index. 
erver. Therefore, it requests th i yste! ' 
D eq € Operating system running on the 


(xi) The 


operating system on the Wi F 
file and gives it to e Web server then locates i 


the HTTP software running on the Web server. 


(xii) The HTTP software running on the Web server adds 
o the file to form an HTTP response. The HTTP response is à 


containing header information (such as di i 

bei n 5 s date and t f the resp* 
ing sent; etc.) and the HTML text corre Beim ime ^ n 

case, index.htm). Ponding € requested 


of lines 
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2008. This service incorporates some new features, such as SSL p, 
authentication that allows creating and using custom user accounts and q 
transfer, which protect the sensitive data on network. The ne service off 
Web administrators and host an integrated management — configurar. 
experience for FTP and Web sites through IIS manager. The FIF Publish 
service allows Web authors to publish content more easily and Securely toy 
7.0 Web servers using modern Internet publishing standards. Using FTP, y 
can easily upload and download files and distribute files on the Internet w 
each other. 


(iii) World Wide Web (WWW) Services - WWW services are install 
by the IIS 7 by default. WWW services use the Hypertext Transfer Protog 
(HTTP) to allow users to publish the content on the Web using HTML a 
XML. This published content can be viewed by using an Internet browser; 
the Internet Explorer (IE). IIS 7 has divided this service into two services, 
WWW service and a new service, Windows Process Activation Service (WAS, 
WAS manages the application pool configuration, which contains all We 
applications on domain. These two services run on Local System using th 
Svchost.exe file and share the same information over the network. Using th 
WWW services, we can host the graphical HTTP sites. 


(iv) Simple Mail Transfer Protocol (SMTP) Service — IIS 7 suppot 
the Simple Mail Transfer Protocol (SMTP) to transport email through th 
Internet. The SMTP protocol is used to transfer an e-mail from e-mail clienti 
server and one mail server to another mail server. The SMTP protocol sen 
and receives e-mail between servers, and retrieves e-mail from the mail sent 
to the user's computer using the Post Office Protocol version 3 (POP3) servic 


POP3 protocol makes the connection between the sender’s server and th 
recipient and then transfers the messages. 


(v) Network News Transfer Protocol (NNT! PP) Service — The NNI 
protocol is used to transfer Usenet news from one server to another sent 
Usenet news is a large collection of discussion groups, covering a wide rang 
of topics. NNTP protocol manages the global network of collected Use 


newsgroups. TCP/IP connection allows the client and the server to trans 
article without transmission delay. 


0.34. Explain how to configure IIS 7 to serve documents through H! Ti 

Ans. To start the Internet Information Services (IIS) Manager, click 
start button, select the Control Panel, click Classic View, double click 
Administrative Tools icon and double cl : 


: ick the Internet I ation Servi 
(IIS) Manager icon. Click Continue in dern 


c £ the dialog that appears to display , 
Internet Information Services (IIS) Manager window (fig. 1.6). j 


| 
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Tay Internet Information Services (IS) Manager 


3 Application 
Web Sites. 


NET NET NET Trust Application Connection 
Compilation Globalization Levels Settings ^ Settings 


LJA 
Session SMTP 
State E-mail 


Providers. 


2 S a m s 


Default 
Document 


a & a & 


Pi Falled Handler ISAPI and 
p Eror Paget, Guest Tra. Mappings CGI Rest. 


r AD 2 
E Moduk Server Worker 
Ta MS Certificates Processes 


Authentic... Authorizat.. CGI 
Rules 


Fig. 1.6 Internet Information Services (IIS) Manager Window (IIS 7.0) 


In the Internet Information Services (IIS) Manager window, the left pane 
contains the Web server's directory structure. The name of the machine running 
IIS (e.g. QUALIFLY) is listed at the top of the Connections column. Clicking 
the arrow symbol to the left of the machine name displays Application Pools 
and Web Sites. The Application Pools folder contains tools for configuring 
advanced features of IIS 7.0. : . 

Expand Web Sites by clicking the arrow to the left of it. This should 
display Default Web Site. Expand Default Web Site by clicking the arrow to 
the left of it. These are the folders and virtual directories in the default Web 
site. For this example, we create a virtual directory from which we request 
our documents. To create a virtual directory, right click Default Web Site 
and select Add Virtual Directory. This displays the Add Virtual Directory 
dialog (fig. 1.7). In the Alias — field, enter a name for the virtual t 
We use the name chapter21 Test, although the virtual directory may ave ay 
name, provided that it does not conflict with an existing virtual aineen, E 
the Physical Path — field, enter the path for the directory containing 
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s will view. We created a directory nan 
documents. If necessary, select the |. 
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Q.37. Give the difference between IIS and Apache web. 


documents that client 


CAChaptter21 Examples for our 
to navigate to the desired directory or to create a new one. 
g 


€. Click Ok 
create the new virtual directory. [s.No. | 
In Windows Vista, before you can use IIS, you must enable the Wy i 
Wide Web Publishing Service (W3SVC). To do so, go to the start but 

select Control Panel, select Classic Add Virtual Directory 
View, double click Administrative Web Sits Nare f Dotault Web Sita AS 
Tools and double click Services. This | os j 
displays the Services window.Locate 
World Wide Web Publishing Service 
in the list of services, then right click 
it and select Properties. In the 
window that appears, change the 
Startup type : option to Automatic, 
then click OK.Next, right click World 
Wide Web Publishing Service again 


and select Start to run IIS so that it Fig. 1.7 Add Virtual Directory Dial 
can accept requests. j 


IIS is developed by microsoft. | Apache is developed by Apache 
foundation. 

Apache Tomcat server is only 
Web server. 

Apache server runs in user space 
only. 

Apache is free. 

Apache Web server is operating 
system independent i.e. Apache can 
run on almost any OS including 
UNIX, Apple's OS X, and on most 
Linux distributions. 

Support from Apache comes from 
the community itself. 

Apache Web server is open source 
i.e., Apache is known to be open 
source because the source code is 
available for configuration as per our 
requirements, its a Linux based 
product. 


IIS is both Web server and 
application server. 

IIS server runs in user space 
and Kernel space. 

IIS is packaged with windows. 
IIS Web server is operating 
system dependent. It runs in 
only windows environment. 


IIS has a dedicated staff to 
answer most problems. 
IIS is not open source. 


Q.35. What is APACHE ? 


Ans. Apache is an open source, public-domain Web server. The Apad 
server, maintained by the Apache software Foundation, is currently the mi 
popular Web server because of its stability, efficiency, portability, security 1 


small size. It open source software that runs on UNIX, Linux, Mac OS 
Windows and numerous other platforms. 


FEATURES OF WE 
EFFECTIVE WEB DESIGN 
BROWSER, BANDW. 
RESOLUTION, LOOK AND 
LAYOUT AND LINKING, USE 


Apache is a freely available Web server. It can be downloaded 
http://www.apache.org for free. 


.36. Explaii 
paa plain how to configure Apache to serve documents thro : 


Q.38. Write and explain features of Web 2.0. 


i € configure the Apache HTTP Server by editing the httpd.co 
. ‘his file contains all the information that the Apache HTTP server nê 


to run correctly and serve We 
t eb documents. For Wi 
is located in the conf subdirecto un ee nc 


OS X and most Linux distros, 


Ans. Web 2.0 has taken the web world with storm. Web 2.0 facilitates 
participatory information sharing, interoperability, user-centered design and 
collaboration on the World Wide Web. The term “Web 2.0” was coined in 
ry of. Apache’s installation directory. For MA January 1999 by Darcy DiNucci, a consultant on electronic information design. 
edit this file, either open the h "i located in the /etc/apache2/ directory: 4 : has lead to new innovations in interactions = the go w E res 
Start menu and select Pr ttpd.conf in a text editor, or in Windows go to Social networking Sites, Blogs, Wikis, Video sharing sites, Hosted services 


Configure Apache S, Ic ams >Apache HTTP Server [version numbell, tl ar other Web applications. It has made the web a very interactive 
erver > Edit the Apache httpd. conf Configuration V. ee 
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Web 2.0 contains many applications for storage, creation 


dissemination of information which were not present before its arrival, i 
the combined capabilities of client- and server-side software or techng 
content syndication and the use of network protocols. It has changei 
trend of passive website, which allowed user access to only the qq 
displayed on the website. In short, information sharing has taken a huge 
with Web 2.0. The web browser technologies used to browse a Web 
application are developed using Asynchronous JavaScript and XML (Aj 
Adobe Flash, and JavaScript/Ajax frameworks such as Yahoo! UI Lib 
Dojo Toolkit etc. Ajax programming uses javaScript to upload and down} 
new data from the web server without refreshing the entire web page, 


Some of the features of Web 2.0 include — Fig. 1.8 Use of Colors and Fonts 


(i) Searching Functionality — By simply typing a keyword, When it comes to the development side of the website, there are a few key 

user can have access to any information. strategies to be taken into consideration. First of all, the load time of a page is 
very important to make the user stay on the page and read the content. Therefore, 

* to reduce the page load time, a developer should optimize image sizes (size and 
| scale), concatenate files by appending one to the other, combine code into a 

(iii) Linkage to Another World — Through the endless applicati central CSS or JavaScript file to reduce HTTP requests and minify HTML, CSS 
of Web 2.0, you can connect to a person sitting in the other corner or| and JavaScript through compression. Then, a developer must remember that 
world. It gives shape to a meaningful communication through the web. | now-a-days mobile phones and tablets are extremely used, so a website should 
| be accessible from multiple devices with multiple screen sizes. In this sense, a 
author the web b A j i | responsive layout is the best approach. Responsive design can be achieved through 

uthor the web content by creating or updating contents on a website. More! CSS media queries or by using front-end frameworks that are built with a 
anybody can become an author through blogs. responsive grid system such as Bootstrap or Foundation. 

(v) Tagging the Content — Using this feature, you need not dex Among the most popular web standards are the technologies that work 
on the pre-made categories and can simply ease the searching by addinga across multiple devices - HTML5, CSS3, SVG, Canvas, and so on. “HTML5 
word description. is basically an attempt to evolve the web to meet the demands of the way we 

Thus, Web 2.0 has revolutionized the World Wide Web by | use it today, which has mutated dramatically from its earliest iteration as a 


cps 5 5 B simple network of linked documents. 
communication easier, smart: NON. 
beginning as the coming um |. Eod Mi E ut es " ig One of the best practices to do front-end development the right way is to 
that will change the face of T Sigpibents in this d | use Modernizr. Modemizr is a JavaScript library that detects HTMLS and 
nternet. | CSS3 features in the browser. 


(ii) Extensions — This software has enabled the web to serve 
application platform as well as a storehouse of documents. 


(iv) Authoring the Website Content — Web 2.0 also enables 


Q.39. Write the concepts Sor effective web design. | Some important points have a satisfying user experience, information 
Ans. Good web design fulfills the needs of th Haspbes 
e users then ; 

have an experience that will make them come back to o and ae (i) Useful — The content should be to the point and should fulfil the 
to layout design, some effective strategies include — using clean typefaces! user's need. p , 
are easy to read online (for example, Sans Serif fonts like Arial and Verdi (ii) Usable — The website must be practical, easily manageable. . 
using combinations of colors that enhance the user experience — vibrant 0! (iii) Desirable — The brand logo, brand identity, images and other design 
for buttons, contrasting colors for the text and background, building Jod €lements should be used in a way that they raise emotion and appreciation. 
Page structure, designing clickable buttons and following the "three clicknd (iv) Findable — The content must be accessible onsite and offsite. 


using grid layouts as shown in fig. 1.8. 
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‘hle — The website content must be accessible to use, ; . : 
eer id vici need for scrolling, use strong colour contrast tel supports different p aes gigs Support for different tags. Also varies 
wiegen es cili use alt-tags to label all the images and videos) across the different browsers and their version, 
the text anı J 4 


(vi) Credible — Users must trust the content. 
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(ii) CSS — If the page is designed with Cascading Style Sheet (CSS) 
and if the user browser does not support CSS, the page looks very different. 


NER > nu 
Q.40. What do you mean by web design issues : Also explain bron (iii) Margins and Border Inconsistencies — Display of margins and 


compatibility. border may look different on different browser, 
Ans. Website design is a critical issue for its success and influenced) 


" (iv) Selection of Font — Some browser does not support all fonts. 
various environmental issues such as browser support, bandwidth ofi 


connection, cache support and display resolution of the monitor. Look, — Q.47. Explain in brief following web design issues — 
feel also determines the overall appearance of the website to a greater exta (i) Bandwidth and cache (ii) Display resolution. 


The website theme, fonts, graphics and colours need to be carefully chog Ans. (i) Bandwidth and Cache— Bandwidth and cache are also considered 
The presentation of information should be clear and easy to access, Py as the most important aspects of website design. Users have different connection 
templates are used to design individual pages using grid structure and distrib speed, i.e. bandwidth for accessing websites. It is very difficult to open websites 
the content for quick view and easy access. Design of the website is to| with too many images on low bandwidth. Generally users have no patience to 
done after considering various user requirements and choices to make itu wait for longer time and move to other site without looking at contents of a web 
centric. Website planning is most important activity in preparing an effecti page. Browsers provide temporary memory called as cache to store the graphics. 
website design. Navigation is the most important design element that mak When a page is demanded by a browser for its first time, the images downloaded 
website clear, consistent, meaningful and understandable. Website desi are stored in the cache area of browser for a specific time as per user’s preferences. 
encompasses many different skills and disciplines in the production g When next time the same page is demanded then only HTML files are downloaded 
maintenance of websites. The different area of web design includes graph and the browser uses all the images from the cache which increases the download 
design, interface design, standardised code, proprietary software and sem speed significantly. Cache also plays very important role in webpage download 
engine optimization. The term web design is normally used to describe f speed, so careful attention needs to be given while designing a webpage as far as 
design process relating to the front-end (client side) design of a website includi cache of the browser is concerned. 


writing mark up. Web design partially overlaps web engineering in the broat 


(ii) Display Resolution — Display resolution is another important 
scope of web development. 


| factor affecting the web page design, as we do not have any control on display 
Browser Compatibility — Browser compatibility determines the welt resolution of the monitor on which user view our pages. Display or screen 
behaviour on different browsing platforms. Today the commonly emploj resolutions are measured in terms of pixels and common resolutions are 800 x 
browsers are Internet explorer, chrome, mozilla-firefox and opera. Itiss cif 600 and 1024 x 786. With the reduction is cost of large size monitors 1240 $ 
as a design parameter in W3C guidelines document UAAG 20 sind d 1024 will become common in near future. Today most monitors are using 
browser has its own way rendering and displaying the contents of resolution of 1024 x 786 pixels. However many old monitor are working on 
page. So the web pages must be designed in such a way that it can be suppof 800 x 600. Considering the different resolutions, we have three choices for 
by each of the commonly employed browser. Almost hundred different D Web page design — 
of browsers are available these days making it difficult for the designt (a) Design a web page with fix resolution say 800 x 600. The 
webmasters to develop websites with similar behaviour on multiple latfori Web page properly fits into a screen with this resolution but leaves some part 
Strict adherence to the design guidelines may fulfil this crit Ip " ceri of the screen if the resolution is 1024 x 786. On the other side, if the design is 
level. The browser compatibility issues are as follows x criteria upto CH fixed to use 1024 x 786 pixels, it will not fit into the screen having 800 x 600 
G) HTML Ta , Tesolutions. 


88 — The different browser and their di ersit " s 
greatly affect the way a page is rendered, as (sry iu. W (b) Make a flexible design using HTML table to fit into different 


Interpret same HTMI, tag in a different way. Different version of HTML yj TSolutions. Web page is divided into three columns with middle column havinga 
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variable width. Depending on the (m cai ewe Page is yi WWW and HTTP Protocol 35 
it changes its width. However, challenge is to design that part in such , (g) Too many graphics or images with larger sizes reduce the 
that on different screen resolutions, the content remains in proper vien download speed. 

form. , (h) So, use limited graphics with smaller size or in compressed 

(c) If the page is displayed on a monitor with a higher resolu format. , 

the page is displayed on left hand side and some part on the right-hand; . (i) Colors are part of everybody’s life and web sites are not 
remains blank. We can use centered design to display page, e.g. in Midd exceptions. 

the screen, leaving equal space on both the sides of the page. (j) Web site with good content but improper color scheme does 


We should also consider a point that when a page is seen on print mg not attract viewers and hence it fails. 


and screen media, it differs in colors due to different nature of both, (k) So, color scheme that suits web site theme, content, and 
designing a page we have to keep in mind that it is to be displayed on sq, liking of the target audiences plays critical role. 

media and accordingly the colors should be chosen. (/) For the graphic and color schemes, help of graphics and art 

S g designers is required to give the web site commercial and professional touch. 

Q.42. Explain in brief — (ii) Page Layout and Linking — Website consists of individual 

(i) Look and feel (ii) Page layout and linking. WebPages that are linked together using various navigational links. Page layout 


Ans. (i) Look and Feel — Look and feel decides the overall appeara defines the visual structure of the page and divides the page area into different 
of a website. It includes all the design aspects such as website theme, y parts to present the information of varying importance. Page layout allows the 
typography, graphic, visual structure, navigation etc. During website desj designer to distribute the contents in a page such that visitor can view it easily 
the website look and feel needs to be given special focus because it is thea 2nd find necessary details. While designing the page layout designers/ 
parameter which is concerned with every types of dynamic user. jj Webmasters should keep following points in mind - 


typography is very important issue and includes different aspects like fot (a) While distributing the content in layout, balance between 
| text and graphics. Too much graphics may lead to slow down the page. 
grap! 


graphics and colour. They are important from both scanning and reading p) : A 
of view as they express the structure as well as emotion. Consider the follow COCITIME tbieielement can be qued todsigniitietgrid:baged 


j É : : 1 1 page layouts. 
important points while choosing the typeface for your website — SE (c) Complex layout can be designed with nested tables and CSS. 


(a) Different fonts have different readability and it directly afi (d) Page layout is also called the page template. Readymade 
the user psychology. templates are also available on the Internet which can be directly used to 


(b) Maintain consistency in using the font type and size. Dil design pages quickly. 2 , 
use too many fonts with too many sizes. Use of CSS helps in maintait (e) Locate the items on the page using screen importance to 
consistency. attract the user's attention on important items. 
i ilabil; Sr H (f) Maintain consistency among the layout of the pages such 
font used in E, mpi - Rrdgslity 3 jj or" on visitor’s machine. Y! that it creates cohesive design of web site matching to you theme. 
4 page is not installed on visitor’s machine, browser use defi 
font, times new roman. 0.43. Write short note on user centric design and sitemap. 


(d) Height and width of same character is different in diff Ans. User Centric Design — It is very difficult for web designer to predict 

font. This affects line endings and paragraph boundarie: | the exact behaviour of the website user. However, idea about behaviour of 
" S 4 Common user helps in making design of the website user centric. Users either 

(e) Graphics make the web site attractive and convey E Scan the information on the web page to find the section of their interest or 


information; including images, charts and many others. read the information to get the details. If the information is provided for reading, 


(f) Different file formats su i jj *-8. article of li zine or news paper site, then user's general 
pport different levels of comp? 7S. < or an:onanenmaga : > : 
and other features. JPG, GIF, PNG are popular image formats. d reading habit gives the idea of how to organize such information. People 


Web Technology 


m left-to-right and top-to-bottom. Hence WE can or 
such contents in column fashion on a web pake Maiak ianh Of co; 
change colours once visited, so user get an i ich link have} 
visited and which are yet to be visited. 

People scan TV screen circular fashion in clockwise direction, 
property can be used to provide the link to different sections of website 
home page for articles and tutorials divided into sections, providing the 
of contents greatly helps users in quickly accessing the desired Part OF tutoj 
Web pages are linked together to provide non-sequential but quick readin 
is sometimes necessary to highlight the words in a paragraph as links to proj 
the links to the pages giving detail meaning of the word. Some of the " 
sites also provide link to the related topic at the end ofthe web page deserit 
a topic. This provides user with facility to read the related information toj 
more clearly. 

Sitemap — Sitemap provides different ways through which a wei 
can be visited and explored. It also helps the visitor to locate its current posit 
on website and multiple paths through which the website can be naviga 
Sitemap check the navigation facility on the website as prescribed in W 
document WCAG 1.0 guidelines in priority 2 checkpoints 13.3. It also provi 
the users with the graphical representation of web pages on website. Anot 
solution to provide the sitemap including link to each section and their pg 
directly. At any time user ‘sitemap’ link from the current page and usingl 
link on it, the user can quickly select the desired content. 
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Q.44. Write process for Web planning. 


Ans. The most important activity in a website development is plani 
To achieve higher success of the website in terms of user satisfaction, Df 
Planning is needed. Before we start developing a website, we should ask cet 
questions such as — Why are we developing this website, What do we ach 
by developing this website, Who are the people who will use this webs 
What are the information contents, How are these contents organized 
224 le ways, How the files prepared are organized. Careful » 
is EN leads to better planning and ultimately Jea4 
any specific type af debe These steps can be applied in same man 
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The steps in the Web planning process are as follows — 


(i) Objective and Goal — There is always an objective behind every 
activity and same is the case with website development. Many a times the 
success rate of the website decreases and desired results are not achieved 
because of unclear objectives or purpose. If objective for developing website 
is clear, rest of the steps in planning will become easier. The websites are 
developed for different reasons. It may be to provide information and better 
services to customer, to update the members in a community, to make citizens 
aware of government rules and regulations, to increase the sell or to make the 
business online. Once the objective is clear, the other activities in planning 
remain focused around it. Goal means the achievement from the website 
development. The kind of benefit an individual or an organization gets from it 
is called value addition. If a site is developed to provide information to the 
users, the goal should be user satisfaction in terms of getting timely and accurate 
information. If it is business website, goal is to increase in the sell. Both 
objective and goal of the website development should be clear and in well 
documented form. It is also important to define the quantifiable measures to 
find the success of the website. 


(ii) User Profile/Audience — Next step in website planning is to 
‘identify the target audience’, i.e. the people for whom the website is to be 
developed. It is very important to know about their background, educational 
qualification, gender, age, likings and preferences. Even user profile affects 
the website design e.g. children websites must includes cartoons and graphics 
with colors. For continuous improvement, a feedback form is designed to get 
their requirements and views about the site. This feedback can be used to 
improve the overall appearance of the site, presentation of the content and 
navigation styles. 


(iii) Identifying and Organizing Content — The basic objective f = 
any website is to provide the information in one or other form such as text, 
image, audio, video, various forms etc. to the target audience. This information 
forms the contents of the website. The content should be unambiguous, clear, 
Spell checked, precise, accurate, relevant, recent and matching to site objective. 
It should be well organized and must fulfil the information need of the users. 
Once the information is identified and collected, the next important activity is 
to prepare storyboard that includes the page layouts, their logical groupings 
and the navigation choices. Either paper based approach is used or we can use 
the flowchart software to prepare it. We can also use particular structure 
depending upon the contents,, user needs and navigation choices. 


hnology 
Web publishing. (R.GP.V., June 2014, 20, 
Or 
of Web publishing. 
(R.GP.K., Dec. 2016, May 20) 
s are as follows — | 
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Q.45. Write process for 
N 
Briefly describe the process 


n the Web publishing proces: 
Purpose — Finding a purpose for a Web site is 
b can be very useful, and many common reasq, 
m are — commerce, entertainme, 
presence, promotion, research a 


Ans. The steps i 

() Dus 

ily difficult. The We 
ered up a Web site, some of the 
information, marketing, personal pleasure, 
i nical support. . 
mim ne sites is that they may have eie purposes 
corporate Web site may include demands for marketing, public relat ions, invesy 
relations, technical support, commerce, and human resource services such; 
job recruiting. Trying to meet all of these needs while thinking about the 
site as one entity can be difficult. Just like a large-scale software system wi 
many functions, a Web site with many different goals probably should} 
broken into modules, or subprojects, that constitute parts of a larger whok 


(ii) Who is the Audience — Of course, just having a purpose for 
site is not enough. You need to consider a site’s audience. Notice how oft 
sites reflect the organizational structure of a company rather than the needs 
the customer. The goal is always to keep the user at the center of the discussio 

Figuring out an audience does not have to be that hard, but do not assu 
that your audience is too large. People from South America or the Sudand 
visit your Web page — but do they ? Should they ? It is important to be realis 
about the audience ofthe Web. The Web has millions of users, but they are? 
all going to visit a particular Web site. If they did, things probably would! 
work well. When the idea of a site's audience is discussed, do not think 
terms of a nameless, faceless John Q.Cybercitizen with a modem antl 
America Online account. When thinking about users, try to get as specifi 
possible, and even ask users, if possible. 


If you already have a site set up, you have a wealth of information al 
your users — your server logs. Logs can tell you quite a bit about your! 
base. Depending on the server and its confi guration, you can learn the time 
day that you get the most hits, the pages visited the most, the browsers? 

2rsions being used, the domains your visitors come from, and even the pt 


that referred visitors to your site. From the logs, you can even infer conne 
speeds, based on delive 


running yet, begin with 
Once the site is running, 
that your audience is di 


your best estimate of the kinds of visitors you € [ 
» check the logs against your estimates — you m». 
fferent than you expected. An important point b 


ty time between pages. If you do not have a $ | 
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design is that you must be willing to revise your designs, even going as far as 
throwing away your favorite ideas, if they do not fit with your actual audience. 

(iii) Who will Pay for It — Sites cost money to produce, so they 
generally have to produce some benefit to continue. While people do put up 
sites for personal enjoyment, even this type of site has limits in terms of an 
individual's investment of time and money, It is very important to understand 
the business model of the site. Only a year or two ago, many corporate Web 
budgets were not always the first concern, due to the novelty ofthe technology. 


Today, however, Web sites often have to prove that they are “worth it". The 
money has to come from somewhere. 


Asite’s creator could pay for everything, but that probably is not reasonable 
unless the Web site is for pure enjoyment or is nonprofit. Typically, some 
funds have to be collected, probably indirectly, to support the site. For example, 
while a promotional site for a movie may not directly collect revenues, it can 
influence the audience and have some impact on the success or failure of the 
film. Interestingly, many Web sites are nearly as indirect as a movie promotion 
site. Measuring the direct benefit of having such sites can be very difficult. 
More directly measurable sites are those on which leads are collected or goods 
are sold. Some value can be put on these transactions, and an understanding 
of the benefit of the site can be determined. 

Another possible business model for a Web site is to have viewers pay, as 
in a subscription model. The problem with this model is that viewers must be 
given a convincing reason to pay for the information or service available at the 
Web site. Making a Web site valuable to a user is tricky, especially considering 
that value often is both psychological and real. When looking at the value of 
the information available in an encyclopedia, think about its form. If the 
encyclopedia's information is in book form, the cost might be as high as 
$1000. Put the same information on a CD-ROM, and see if the information 
can be sold for the same cost. What if the same information is on a Web site? 
On a CD-ROM, the information probably can be sold for $50 to $100. On a 
Web site, it goes for even less, particularly if the user only wants to buy a 
Specific piece of information. 


(iv) Defining Goals — A goal for a site is not the same as its purpose. 
A purpose gives a general idea of what the site is for, whereas a goal is very 
Specific. A goal can help define how much should be spent, but goals must be 
measurable. What is a measurable goal of the site ? Selling x dollars worth of 
product directly through the Web site is a measurable goal, as is selling x 
dollars of product or service indirectly through leads. Reaching a certain usage 
‘evel Per day, week, or month can be a goal. So is lowering the number of 
Incoming technical support phone calls by a certain amount. Several ways 


P*I5t to measure the success or failure of a Web project, but measurements 
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two categories — soft and hard. Hard measurements 
such as the number of visitors per day, d 
ear. For example, with a promotional site fr 


d whether the site had any effect 


generally come in 
those that are easily ugue 
rements are a little less 
ks it might be difficult to understan| 
the box office sales. f ae i 
(v) Defining Scope — After defining a ra s goa ^ you need 
define what is necessary to reach your goals. This is known as efining Scop 
Finding the essentials of a Web site might not be easy, particularly if, 
has many purposes or many parties involved in its development. One approy 
is to have a brainstorming session, in which users provide ideas. Each ij 
is then written down on a 3x5 card. After all the cards have been creats 
ask the users to sort the cards into piles. First, sort the cards into simil 
piles to see how things are related. Next, sort the piles in order of importan; 
What is important can eventually be distilled out of the cards. Remember 
cut down the number of cards, to make people focus on what is tni 
important. 

Instead of coming up with ideas of what should go into a site to med 
particular goal or goals, you may be tempted to take existing materials, sw 
as marketing pieces, and convert them to the Web. Unfortunately, creatingt 
content of the site based solely on text and pictures from manuals, brochur 
and other support materials rarely works. Migrating text from print to the W 
is troublesome, because the media are so different. Reading onscreen i 
been proven to be much slower than reading from paper. In practice, peo} 
tend not to read information online carefully. They tend to scan it quicklya 
then print what they need. In this sense, writing for paper tends to go agail 
screen reading. Think about newspaper or TV news stories — the main poil 
stated first and then discussed. This goes against the slow buildup of m 
paper documents, which carefully spell out a point. With visitors skimni 

the site, key bullet points tend to be read while detailed information is skip 
The main thing is to keep the points obvious and simple. Even if informatio 
presented well, poor organization can ruin all the hard work in preparing! 


information. If a viewer can’t find the information, who cares how grea 
looks or how well it reads ? | 


, (vi) Organization of Information — Organizing the informatiot 
a Web site is often just as important as the information itself. If visitors! 
eb site can’t find what they are looking for, they may get frustrated 


1ave. Organizing information is a matter of grouping similar items i? 
same place. 


(a) Tree Structure — Site designers often use a tree stri 
or hierarchy for their sites, as shown in fig. 1.9. 
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Joe Smith 


Product 2 Fred Jones 


Fig. 1.9 A Typical Web Site Tree Diagram 


While the tree structure seems the most appropriate choice for Web sites, 
you still need to decide how many choices should be at the top level, and how 
wide versus how deep the tree should be. If too many choices are at the top 
level, the structure is flat and may be confusing. Forcing people farther down 
the tree can be frustrating, because it requires them to keep moving, level by 
level, to find the appropriate information. The depth versus breadth issue is 
shown in fig. 1.10. 


Depth versus Breadth 


LE ee 


Fig. 1.10 Depth versus Breadth in a Tree Structure 
(b) Pure Linear Structure — Web-based information doesn't 
necessarily have to be structured in the form of a tree. Sometimes, a pure 
linear organization, with one page after another, makes sense. A slide show, 
tour, or presentation probably should be in the form of a linear progression. 
The basic idea of a linear structure is shown in fig. 1.11. 


Pure Linear 
Fig. 1.11 Pure Linear Organization 
(c) Linear Structure with Alternatives — Another approach 
might be a linear progression with alternatives- a series of yes andno questions 
that eventual ly lead to the next question in the sequence. An effective application 
of the linear with alternatives structure comes in the form of an AIDS awareness 
Site that discusses risk factors in a yes and no question fashion, but eventually 
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t risk category. regardless of the choice. This gives the sit 
tivity, which engages the viewer more than a pure lng 
tog with alternatives is shown in fig. 1.12. 


leads to the nex! 
false sense of interac 
structure. The linear 


Linear with Alternatives Linear with Options 


eS 


Cc 


EU AR 
Co 


Fig. 1.13 Linear Structure 


i inear Structure 
Fig. 1.12 Line with Options 


with Alternatives 

(d) Linear Structure with Options — Another form j 

organization is the linear with options structure. This structure, Shown it 

fig. 1.13, is good for a set of information that is sometimes optional. Fy 

example, in many surveys, the survey taker is asked to skip a set of question 

depending on his or her answer. A Web form of such a survey would be; 

perfect candidate for linear with options, because it allows the reader to sk 

over questions that are not relevant, while still preserving the general pathd 
the information. 


(e) Linear Structure with Side Trips — The linear with sid 
trips structure is perfect for a body of information that may have usefi 
supplementary information. For example, a linear Web presentation abot 
flowers may lead to a side trip about beekeeping that the user can view, bt 
later return to the main discussion, as shown in fig. 1.14. This form of si 
provides diversion while still preserving the path. Linear with side trips is 
form of tree structure — just turn the structure on its side. When used wi 
linear content, it warrants its own discussion. 


Linear with Side Trips Grid 


À Fig. 1.15 Grid Structure 
0 Grid Style Structure — The grid style has a great degree 
on, as do many of the linear forms. The grid provides a set 
ecause of its regular stru id fom 
good for related items izati ps ce: onion | 
quA mr and organization, such as items that might be fount? 


€ columns of the grid bei à : i 
roduct I; grid being associated with a partic! 
product line, and the nodes representing the products in that dede prodi 


L ET 
-L--L7I- Dae d 


c 


Fig. 1.14 Linear Structure with Side Trips 
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line. Moving across columns might be like moving among equivalent products 
between product lines. The basic idea of the grid is shown in fig. 1.15. 

The tree structure or hierarchy is much less structured than the grid. A 
narrow hierarchy provides few choices for the user, but requires many clicks 
to get to the destination. On the other hand, the wide hierarchy provides many 


choices, SO it requires fewer clicks to get to the destination information, 
assuming the user makes the correct decisions. 


(g Mixed Hierarchy — To balance the problems of 
hierarchies, many developers consider a mixed form. The idea of. skips ahead 
or alternatives was previously discussed in relationship to the linear structure. 
How about adding a skip ahead to a tree structure ? A special link from the 
top of the tree could lead directly to an important piece of information. This 
often is seen in Web sites in which a special button on the home page links 
directly to the free download or another important item. Deeper in the site, it 
may be useful to provide a catalog, so the grid structure makes sense. Perhaps 
in another part of the site, a presentation should be used, so the linear style 
makes sense. Most complex Web sites are actually mixed hierarchies, as 
shown in fig. 1.16. 

Mixed Hierarchy 


(aR, 


Fig. 1.16 An Example of 
Mixed Hierarchy 


Pure Web 


ae 
S AN 
Fig. 1.17 An Example of 
Pure Web Structure 
(h) Pure Web Structure — The problem with the mixed 
hierarchy is that it can easily degrade into the pure Web form, which is a 
tangled mess of links in which the organization is unclear. All sense of 
spatiality is lost in the pure Web form. The only navigational sense is 
"signpost based", whereby the viewer recognizes landmarks in the site, 
such as the home page. The benefit of the pure Web form is obvious if the 
user is familiar with the data, because navigating among items that are 
fully connected is easy. However, the organization may be so unclear that 
the confusion factor drives users away. An example ofa pure Web structure 
1s shown in fig. 1.17. 
(i) Balancing Linear and Web Information Structures — 
When Organizing information, the aim is to achieve a balance betwen 
Predictability and expressiveness. Although the Web form may be very 


expressive, it may be completely unpredictable as far as the user is concerned. 
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d, the linear form is very predictable, but not ter 
nd, 


odisse a lance of these forms is shown in fig. 1.18. A temptation’ cei Se Sk a a pes GEI, D larger projects; 


ive. The bz ! 
to add inks anywhere you can. This was Expressiveness Wa; 


commonly seen in early Web sites, wherein 


Ñ however, approaching the task without a sense of where the project is going is 
foolish. If the site is developed commercially, such planning is mandatory. 


different topic Grid Without a ped ees ww set site, how can a vendor price the site ? 
any word that referred to a arlieren’ © People often ask Web Cevelopers how much a site costs, but this depends on 
became a hyperlink. Resist this reine Hierarchy the size, scope and technology that goes into the site, among other factors. A 
When you are adding a link, ask yoursel lisent 


company with a comprehensive Site plan can send the project out for bids. 
Without a plan, comparing proposals from competing firms provides little 
information of value. 


MT 

“Does this link add value to the audience 7" vredictable saat 
If the answer is “No”, then the link is Fig. 1.18 A Balance of Li "n 
: à link is an invitation Fig. 1. alance of Linear : 1 l E 
m "oes away from the and Web Information Structure, Q4 ciem is good Web design process ? Write the characteristics of 
e d web design. 

content on that page. goo 


$n Some talk too much about success, citing numei isit ti 

" we" ; — After determining the Ans. p ! i > g rous visitors as true 
(vii) Determining the Site Plan 1 "s D validation of a site's design. This assumes that the Web is primarily about 

content, and structure of the site, you can develop a plan. The plan sho) í h el * 

d DT that describes what is needed and h popularity. Who cares how many visitors come to a page, unless it has some 
consist of a time line, a eere = : Idi siezassHiown Inf n. benefit ? Think about quality and success. If serving the most burgers says 
site will be put together, and a flow chart of the site, g 1.19, anything about making good hamburgers, then McDonald's makes the world's 
best hamburger. This kind of logic gets people in trouble on the Web all the 
3 F time. Consider whether economically successful or trendy Web pages are 
Site Requirements desi d. Ch terizi d Web desien i 5 
Before work begins on the Big Company | Well designed. Characterizing goo Veb design is not easy, especially because 
Web site, the following will be required | it depends largely on your target audience. 


from Big Company. Most Web discussions lose sight of the big picture, placing too much 
* Approved flow chart of the site structus emphasis on how pages look, and not enough emphasis on their content, 
* Approval of graphic design elements | purpose, functionality, or the user's experience. Web design i just graphic 

and site navigation purpose; Y, P à POS MON mu 


design. Web design includes graphic design. Other important aspects of the 


Any change in approved flow chartstrut Web design process may include such areas as the following — 
or graphic design after final approval dit 


will result in scheduling setbacks. After fi G) Artistic style, colour theory, typography, and other visual concerns 
approval, designers will begin to create bii (i) Information design, which specifies how information should 
site graphies and page templates. be organized and linked 

Big Company must provide all content, itt (ii) Hypertext theory 

luding text and images not covered by bis 


site design (elements created by designen) (v) Technical writing 
on or by final content due date if scheduleis! (v) System design 


(vi) Programming 

(vii) Network and server design 

(viii) Business issues and project management. 
Obviously, many disciplines are part of Web design. The first requirement, 
however, is a clear understanding of the site's ultimate purpose. The goal of a 
| Web designer is to produce a usable and appealing visual design for a software 
| System, in the form of a Web site that helps a user fulfill some goal. In other 
T Words, the goal is to develop a site that can be delivered to the user in a 
Fig. 1.19 Sample Web Project Documents A Satisfactory manner be interpreted correctly by the user, and induce the desired 


BIG COMPANY INC. WEB SITE 


Site Development Timeline 
February 1 : Site organization model 


BIG COMPANY INC. WEB SITE 


February 15 : 


Initial design proposals | 
pi l 


February 20 : 


Final design approval 


March 5 : Design and graphics completed 


March10  : Final content delivery 


March20  : Site completed; begin testing 


March 25 


: Complete testing 


April 1 


: Official site launch 


default.htm 
news.htm 
oldnews.htm 
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outcome. Web design should be concerned not only with the aesthetic li 
of a Web site, but also with the user's overall m in the contey 
specific task or problem. The focus is on how something can be dong, 
j it looks. TN 
js ee out expressions like “perception Ape Or “eg 
is king” as arguments for or against focusing on the visua nature of the P 
However, the reality is a balance between these extreme points Of view jp i 
skimp on graphics, the site may seem boring. If you provide a wonde 
interface, but skimp on content, the user may leave to find a site with 
information. If you forget to debug, you may send the user angrily a 
facing error dialog boxes. t 
The best approach to Web design is a holistic one, in which Conte, 
presentation, and interactivity work in harmony. 
Characteristics of a Good Web Design — There are several characteris 
of a good Web design are given below — 
(i) Most attractive (ii) User friendly 
(iii) Secure (iv) Fulfill organization requirement 
(v) Bestsearch ranking (vi) Good speed 
(vii) Give data protection to user data. 


Q.47. What are the features of Web page designing ? 
Ans. Some features of Web page designing include — 
(i) Styling of text 
(iii) Font size and type 
(v) Sound and multimedia files 
(vii) Video clips. 


- 0.48. Define various 
design.’ 


(ii) Images 
(iv) Forms 
(vi) Frames — 


parameters for assessing good and bad Web d 
(R.GP.V., Dec. 20l 


Ans. There are several parameters for assessing good and bad Webs 


design — 


() Strategy — 
However the most attracti 
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ty below — 


(a) What category is my business, and is that obvious on my 
website ? 
(b) What is the purpose of this Web si 
accomplishing it ? 

(c) Who is my target audience, and how do 
them into consideration ? 


te, and is the design 


es the design take 


(d) What do I want my audience to do, and is the design 
encouraging that action ? 

(ii) Usability — Usability is all about the practical considerations of 
what goes into good Web site design, just like speed, user-friendliness, security, 
technical details like sitemaps etc. A lot of these details are not visually apparent. 
You do not look a Web site’s security when you type in its URL. Nonetheless, 
usability is a make-or-break reason for Web sites that work. If a visitor cannot 
search what he or she is looking for because of poor navigation, he or she will 
usually leave. If pages take more time to load, both visitors and search engines 
will notice. To know that Web site is good or bad, there are following questions 
are given below — 

(a) How many time is require to page load and will visitors get 
waiting ? 
(b) How simple is it to search required data ? 
(c) Is there a search key for visitors ? 
(d) Do all the links work properly ? 
(e) Does the site work in various browsers ? 
(f) Does my site work on mobile devices ? 
(iii) Style — To check the Web site is good or bad, there are following 
questions — 
(a) Does my Web site's style align with my brand in terms of 
colours, feel, graphics, etc. ? 
(b) Is the style consistent throughout the Web site ? 
(c) Will the style appropriate for target audience ? 
(d) What feel does the Web site give — orderly or messy ? Sparse 
9r crowded ? Playful or formal ? and how does that align with my goals ? 
(e) Where are picture or decorative touches getting in the way 
of my data or message ? 

(iv) Content — To check the Web site is good or bad, there are 

following questions — 
(a) Are the fonts I have selected readable ? 
(b) Is there sufficient contrast between background colours 


8" and font colours ? 
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(c) Is all the text big sufficient ? 
(d) Will this data be relevant to the user ? 
(e) Does the design make data simple to search ? 


(v) Search Optimization - 


there are following questions — 


(a) Are all my images optimized with ALT tags ? 


(b) Is my programming efficient or are there extraneous te u 


that could be removed ? 


É e is 
this case ! o 
Xo. d browser. The server does not perform any extra processing. This makes the 
To check the Web site is good orh web page processing static. 


WWW and HTTP Protocol 49 


back to the user inside the HTTP response. In other words, the server's job in 


to locate a file on the disk and send its contents back to the 


(ii) Dynamic Web Pages — A Web page is dynamic, if it changes its 


ehaviour in response to external actions. In other words, in response to a 
iser's HTTP request, if the Web page possibly produces different output 


every time, 


it is a dynamic Web page. 
Fig. 1.21 shows the concept of dynamic Web pages. 


(c) Have Lused relevant keywords in title tags, meta descriptis 


heading tags, etc. ? 
(d) Do I have a sitemap ? 


Q.49. Discuss in detail different types of Web pages. 
— Or 
Explain different types of Web documents with the help of suite 
example. (R. GP.V., Dec. 20h 
Ans. The different types of Web pages are discussed below — 

(i) Static Web Pages — A Web page is static, if it does not change 
behaviour in response to external actions. A static Web page remains the sar 
i.e., static, for all its life, unless and until someone manually changes its conted 
Any time any user in the world sends an HTTP request to a Web server, t Fig. 1.21 Dynamic Web Page 
Web server returns the same contents to the user through an HTTP respon (iii) Active Web Pages — A Web page is active, ifitexecutes a program 
Such a Web page is static. Some of the examples of static Web pages? on the client i.e., Web browser. In other words, if a static or dynamic Web 
some home pages, pages specifying the contact details etc., which dot! page not only sends HTML, JavaScript, and CSS to the browser, but in addition 
change that often. a program, the Web page is active. 

The concept of active Web pages is shown in fig. 1.22. 


Locates the 
requested 
program 


HTTP Request on the disk 


——— 
—— 
HTTP Response 


Containing the 
Web page 


The program 
produces HTML 


Locates the 
requested 
Web page 
on the disk 


The program arrived with 
the HTML page executes 
on the client now 


HTTP Request 
lO 


——— 
HTTP Response 
Containing the 
Web page 


HTTP Request 
————— 
———— 

HTTP Response 


Containing the 
Web page 


x: Fig. 1.20 Static Web Page 
€ process of retrieving a static Web page is shown in fig. 1.20. Wa 


ends an HTTP request for retrieving a Web 
to the Web server. The Web server locates 
isk with a .html or .htm extension, and sc? 


the client sends this request 


Web page i.e., a file on the d Fig. 1.22 Active Web Page 
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g ishing tools ? Discuss any twi 
the Web publi ishing ti ? f 
Q.50. What are A ie | 


Ans. A number of Web publishing tools were developed by varia 
corporations. Some of them are — 
(i) Microsoft FrontPage 
ii i Gold 
Gi) Netscape Navigator 
(iii) Macromedia's Backstage Desktop Studio 
(iv) Adobe Page Mill and Site Mill 
(v) Other Web publishing tools are HotDog, HoTMetal and Webb 


(i) Microsoft FrontPage — FrontPage version 97 and 20004 
Microsoft, is a suite of three sets of tools that help us to develop and adminis; 
local and remote Web sites. The three components of FrontPage are — 


(a) The FrontPage Client — It consists of FrontPage Explon 
FrontPage Editor, FrontPage Wizards, and the To Do List. 

With FrontPage Explorer, we can display link, outline, and summary vier 
ofa Web site. All files, documents, and links are shown in the Web view. 
usual configuration, selected in the View menu, is a side-by-side display off 
outline view and the link view. Double clicking an icon opens that HTM 
component in FrontPage Editor. 

FrontPage Editor is used to create and develop Web pages. The Edi 
does not need a knowledge of HTML and presents the user with an interíz 
similar to Microsoft Word with Microsoft Internet Assistant for Word. 

FrontPage also includes templates. We can develop other Web wizal 
and templates using the FrontPage Software Developer's Kit. These wizal 
are chosen when a new Web page is created. Each wizard takes the ut 

through a series of questions that establish the Web content. 
: We can create specialized HTML coding like scheduled imag 
timestamps, which indicate the last date of page modification. 


y (b) The Personal Web Server — It is a 32-bit PC-based W 
server running under Windows 95 or Windows NT that supports the Hif 
and CGI standards. 

The FrontPage Personal Web Se: 


level of the selected drive called Fron 
components — 


Tver creates a new directory at ther 
tPage Webs. This directory has two n 


(1) The Content directory that holds the files and directo! 
Web page. 


(2) The insta| 
Password for page administrati 


that make up the 


lation process also prompts us for a name? 
on. 
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(c) Set of Utilities — Set of utilities of FrontPage are — 
aí) FrontPage TCP/IP — It verifies the TCP/IP 
configuration of a PC hosting a Personal Web Server. 


(2) FrontPage Server Administrator — It handles server 
administration tasks. 
(ii) Netscape Navigator Gold — (a) As Visual Editor — Netscape 
Gold provides a visual editing environment that closely approximates that of a 
Web page and at the same time adopts many of the concepts used by word 
processors and document publishing tools. 
Netscape Gold produces true HTML code, but during the editing phase, 
this code is hidden from the user by the graphical interface. 
Using Templates and the Page Wizard, Netscape has created to reduce 
the amount of work we need to do when getting started. 
(b) Menus for Editing Web Pages — The two important menus 
for editing Web pages are — 

(1) The Insert Menu — It has a list of the different kinds 
of elements that we can add to a Web page. When we select any of the entries 
on this menu, Netscape Gold will automatically add the element to our Web 
page and you do not know about the HTML codes for it. 

(2) The Properties Menu — It enables us to control the 
appearance and actions of the different elements that you can place on a Web 
page. It is same as the way that we can change the appearance of text in a word 
processor. Most of the functions on the Properties menu are controlled by the 
type of text or element that is currently selected in the editing window. 


(R.GP.V., June 2015) 

Ans. Navigation systems are composed of several basic elements, or 
subsystems. First, we have the global, local, and contextual navigation systems 
that are integrated within the Web pages themselves. These embedded navigation 
Systems are typically wrapped around and infused within the content of the 
Site. They provide both context and flexibility, helping users understand where 
they are and where they can go. These three major systems, shown in fig. 
1.23, are generally necessary but not sufficient in themselves. 


Q.51. Write short note on navigation system. 


Where Can 
1Go? 


What's Related to 
What's Here? 


Contextual 
Navigation 


Fig. 1.23 Global, Local and Contextual Embedded Navigation Systems 
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have supplemental navigation systems Such as site : 
ide the content-bearing pages, Tid ar at the top of each page. These site-wide navigation systems allow direct 
S cess tO key areas and functions, no matter where the user travels in the 

site’s hierarchy. ees 

Because global navigation bars are often the single consistent navigation 
sjement in the site, they have a huge impact on usability. Consequently, they 
should be subjected to intensive, iterative user-centered design and testing. 
y Global navigation bars come in all shapes and sizes. Most global navigation 
vide a link to the home page. Many provide a link to the search function. 
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Second, we ! 
indexes, and guides that exist outs 


shown in fig. 1.24. 


Category1 
Subcat!, Subcat2. Subcat3 
Category2 

Subcatl, Subcat?, Subcat3 


Category3 bars pro A " Š : 
Subcatl, Subcat2, Subcat3 Some, like Apple’s and Amazon’s, reinforce the site’s structure and provide 


faa ontextual clues to identify the user's current location within the site. Others, 
Fig. 1.24 Supplemental Navigation Systems "m Dell's, have a simpler implementation and do not do either. This pushes 
Similar to search, these supplemental navigation systems provide diffe burden of providing context down to the local level and opens the doors 
ways of accessing the same information. Sitemaps provide a bird-eye vieyfor inconsistency and disorientation. Global navigation system design forces 
the site. A to Z indexes allow direct access to content. And guides often feaydifficult decisions that must be informed by user needs and by the organization’s 
linear navigation customized around a specific audience, task, or topic, goals, content, oe Se no does not fit all. - 
r rao CNET ’ en not possible to identify the global navigation system from the 
(153 Dieess te brief a brainer navigadon Jentures Wy ae ot a Neb site. The main page is omen "m sole inen en to the 
Ans, When designing a navigation system, it is important to considertomnipresence of the global navigation bar. In some cases, designers choose to 
environment the system will exist in. On the Web, people use Web broweshow an expanded view of the global navigation system on the main page. In 
such as Netscape Navigator and Microsoft Internet Explorer to move another cases, the main page presents a variety of navigation options, and it is 
and view Web sites. These browsers sport many built-in navigation featusimpossible to tell which ones have been carried throughout the site without 
Open URL allows direct access to any page on a Web site. Back exploring further. 
Forward provide a bidirectional backtracking capability. The History me 
a eee ad to pages visited during the current session, and Bookm 
or Favorites enables users to save the location of i 
reference. Web browsers also go beyond the oe hee Mages fo Ay one or more local navigation systems that enable users to explore the 


crumbs” feature by colour-coding hypertext links. By default unvisiimmediate area. Some tightly controlled sites integrate global and local navigation 
hypertext links are one colour and visited hypertext links are another. into a consistent, unified system. For example, the New York Times Web site 


feature helps users see where they have and haven’t been and can help the? resents a global navigation bar that expands to provide local navigation options 
to retrace their steps through a Web site. for each category of news. A reader who selects Business sees different local 
Finally, Web browsers allow for a prospective view that can influe Havigationoptipnethana eadera ee i gu 
how users navigate. As the user passes the cursor over a hypertext link {Te presented within the same navigational framework, —— dots local 
destination URL appears at the bottom of the browser eine hintin att In contrast, large sites like Microsoft.com often provide multip| Sd z 
nature of that content. The prospective view window at the bott no navigation systems that may have little in common with cachotes 
URL ofthe blog. If files and directories have been carefully dnbie roid cl global navigation system. 
oe "ern user context within the content hierarchy. If the nyperteat " These local navigation systems and 
"pe ib deo on another Server, prospective view provides the user yl eves abs often iy different that bs iH, i reasons. First, certain 
ation about this offsite destination (or Sites within sites. Subsites exist for m ord igati roach 
. | areas of content and functionality really do merit a unique €— ko ee 
wide) navigation systems: | Second, due to the decentralized nature of large organizations, d i 
global navigation system is intended to be preset 9f people are often responsible for different content areas, an gr 


te. It is often implemented in the form of a navigat may decide to handle navigation differently. 


0.54. What do you understand by local navigation system ? 
Ans. In many Web sites, the global navigation system in complemented 


the content to which they provide 
reas are referred to as subsites, 


Q.53. Discuss in detail the global (site- 
Ans. By definition, a 
every page throughouta si 


| 


54 Internet and Web Technology WWW and HTTP Protocol 55 

igation. P 
ual naviga i sitemap is most natural for Web sites that lend themselves to hierarchical 
fit neatly into the puri. categori, i don. If the architecture is not strongly hierarchical, an index or alternate 
This demands the Yu o eae navi organi paene tation may be better. You should also consider the Web site's 
ocument, or object. On an e-comp 'yjsua 


ciding whether to employ a sitemap. For a small site with only 
See Also" links can point users to related products and sey; size W en de 
site, these “See Also 


i hical levels, a sitemap may be unnecessary. 
: puc s three hierarchic is i sary. 
On an educational site, they might point to similar articles or related fopj tW? qm design of a sitemap significantly affects its usability. When working 
n ai d i 


igation supports associative learning, ; igner, make sure he or she understands the following rul 
In this way, contextual navigation supp B. U itha graphic designer, e following rules 


; i i define between items. They pW 

loring the relationships you They mb 
lati dias L they did not know about, or become interes of thu n inforce the information hierarchy so the user becomes 
learn about useful products they tef @ Re 


h "d never considered before. Contextual navigation allows Yo. ingly familiar with how the content is organized. 
oman ctive tissue that benefits users and the organizatgg increasing Y ilitate fast, direct access to the contents of the site for those 
aea oe of these links is often more editorial than architec, LCD or vi they want. 
Typically an author, editor, or subject matter expert will determine appro; 585 wi qi Audit o Bibi the user with too muchi information. The 
links once the content is placed into the architectural framework of the} help not scare, the user. 


š P is to 
site. In practice, this usually involves representing words or phrases yo = Indexes — Similar to the back-of-book index found in many print 
sentences or paragraphs (i.e., prose) as embedded or “inline” hypertext lij d A Web-based index presents keywords or phrases alphabetically, 

This approach can be problematic if these contextual links are critic Ex Fennie the hierarchy. Unlike a table of contents, indexes are 

i ility testing shows that users often tend to scan pj V! ; f depth. Therefore, indexes 

ba WES veni x ise = less ‘conspicuous links. For this sa relatively Met. prgenting iuc a gine Wb item they are looking 

Sone IS DE hat id ifi za of the pag WoT well for users who already know the name o z end eise 
YOU may want 1o design a sy Sem BUpFOVIGESIR SPECIE RS PE for. A quick scan of the alphabetical listing will get them where they wan 

visual convention for contextual links. ‘go; there's no need for them to understand where you have placed that item 


When designing a contextual navigation system, imagine that Everk within your hierarchy. 


on the site is a main page or portal in its own right. Once a user has identi Large, complex Web sites often require both a sitemap and a site index. 


a particular product or document, the rest of the site fades into the backgrou The sitemap reinforces the hierarchy and encourages exploration, while the 
This page is now their interface. 


site index bypasses the hierarchy and facilitates known-item finding. For small 
Q.56. Discuss in detail the supplemental navigation systems. | Web sites, a site index alone may be sufficient. 


NT , i ini i Web site involves the level of granularity. 
Ans. Supplemental navigation systems include sitemaps, indexes, A major challenge in indexing a We 


1 : indivi hs or concepts 
i EU . ; Do you index Web pages ? Do you index individual paragrap 
guides. These are external to the basic hierarchy of a Web site and pro" tbat are presented ue and pages ? Or do you index collections of Web pages? 


complementary wa: f i A 
a ESOS Come and completing tasks. In many cases, the answer may be all of the above. Perhaps a more vee 
itemaps — In a book or magazine, the table of contents presents thé! question is — What terms are users going to look for ? The answers shoul 


few levels of the information hierarch izati 3 kn our audience 
z y. It shows the organization struct! gui i ; rs, you need to know yi 
the printed work and supports 8 n guide the index design. To find those answers, y! 


Aironet eh random as well as linear access to the cont and understand their needs. You can learn more about the oe people will 

ie im ofc apter and page numbers. In contrast, a print map hel look for by analyzing search logs and conducting user researc! " =A 
Sate through physical space, whether we are driving through a netw There are tw different ways to create a site index. For small Wel 

Streets and highways or trying to find our terminal in a busy airport. | sites Poseidon: lly, using your knowledge of the 


» you can simply create the index manual ich li include. 
i uie early days of the Web, the terms “sitemap” and “table of cont?! full collection of content to inform decisions about which linka toto 
were used intercha: i 


better metaph ngeably. Of course, we librarians thought the TOC w his centralized, manual approach results in a one-step index. — 
Eme Hage or, but sitemap sounds sexier and less hierarchical, so | In Contrast, on a large site with distributed content manage eee - 
€ de facto standard. make sense to use controlled vocabulary indexing at the documen 


0.55. Explain in brief context 


Ans. Some relationships do not 


igation. 
global and local navigati 
links specific to a particular page, di 
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drive automatic generation of the site index. Since many controlleq Vor 


terms will be applied to more than one document, this type of jn da] 


tei 


allow for a two-step process. First the user selects the term from ¢ 
and then selects from a list of documents indexed with that term, 


Guides — Guides can take several forms, including guided tours tu 
focused around a specific audience, topic, or task. n 


and micro-portals igati 
of navigating and under; 


case, guides supplement the existing means 
site content. 


Guides often serve as useful tools for introducing new users to the c; 
and functionality of a Web site. They can also be valuable marketing too 
restricted-access Web sites, enabling you to show potential Customers y 


they will get for their money. And, they can be valuable internally, provid; 


opportunity to showcase key features of a redesigned site to colleag 


managers, and venture capitalists. 


Guides typically feature linear navigation, but hypertextual navigation shy 


also be available to provide additional flexibility. Screenshots of major 


should be combined with narrative text that explains what can be foun Was 


each area of the Web site. 
Rules of thumb for designing guides include — 
(i) The guide should be short. 
(ii) At any point, the user should be able to exit the guide. 


- (iii) Navigation (Previous, Home, Next) should be located in thes 

on eve i 

kis Ty page so that users can easily step back and forth througll 
(iv) The guide should be designed to answer questions. 


(v) Screenshot: i cue 
details of key features. ots should be crisp, clear, and optimized, with ent 


(vi) If the guide includes more than a fe 


own table of contents. w pages, it may neel! 


the markup tags and is generally information intende 


| - 
| Affect the f 
| With 


HTML | 


(as 


BASICS OF HTML, FORMATTING AND FONTS, COMMENTING 
CODE, COLOR, HYPERLINK, LISTS, TABLES, IMAGES, FORMS 


Q.1. Give brief history of HTML. Also define HTML. 

Ans. The first publicly available description of Hyper Text Markup Language 
a document called HTML Tags, first mentioned on the Internet by Berners- 
Lee in late 1991. It describes 20 elements comprising the initial, relatively 
simple design of HTML. HTML is a text and image formatting language used 
by web browsers to dynamically format web pages. Many of the text elements 
are found in the 1988 and Berners-Lee considered HTML to be an application 
of SGML. It was formally defined as such by the Internet Engineering Task 
Force (IETF) with the mid-1993 publication of the first proposal for an HTML 
specification, “Hyper Text Markup Language (HTML)”. Further development 
under the auspices of the IETF was stalled by competing interests. Since 
1996, the HTML specifications have been maintained, with input from 
commercial software vendors, by the World Wide Web Consortium (W3C). 
However, in 2000, HTML also became an international standard (ISO/IEC 
15445:2000). 


HTML stands for Hyper Text Markup Language. An HTML file is a text 
file containing two types of information — 


G) The markup information which is con 
angle bracket tag delimiters («and >) plus the text contained b 


(ii) The character data of the document, which is everything outside of 
dto be displayed by the browser. 


Furthermore, HTML tags are not case sensitive. The absence of a pe 

for elements that require them is considered as à syntax error ani E 
HTML documents can be create 

HTML files have either the 


contained in tags consisting of 
etween these delimiters. 


i ormatting and look of a page. 
hin, JY text editor or Front Page Express. All 
9r the „html file name extensions. 
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Q.2. What are the versions of H TML ? 


i html document has two sections — 
Ans. The history of HTML has gone through five basic interac - 


Js, ection begins with <head> and ends with </head>. If contains the information 
hey are — x 
the past several years. TI 


t the document, which is not visible to the user. It is mandatory to include 
HTML 2.0 — The early standards for HTML contained many ofi a "ide in the header section, which gives a name to the Web page. The title 
í p 


$ n the bar at the top of the browser window. The search engines use 
inj appears O dexi s. The oth à i 
a for indexing purposes. ^ne other components in header section are 
` | yue, link, meta, script, base, style, and link. The body part contains the 
version added popular features such as support for superscript, su, prolo£ 


Sin e content. There are various tags under the body tag. The comments 
tables, and so on. It also provided backward compatibility for HTML 4 aoti Posed in the special tags < ! — comment — — >. 
HTML 4.0 — This was an early gold standard for HTML and jt à ar 


Sig ec whichimiosteariy HTML progamma ya a However The basic elements are the <html>, <head>, <title>, and <body> tags. 
4.01 has since superseded HTML 4.0. The HTML 4.0 published in Decay - (i) The <html> Element — The <html> element starts an HTML 
1997 and HTML 4.1 in 1999. 


ocument. It contains everything an HTML document contains except the 
1 


HTML 5 - HTML 5 was published as a working draft by the Wy 5 DOCTYPE> element. Table 2.1 lists the attributes of the <html> element. 
January 2008. 


A web page (also called a document) consists of objects. An object; 
be a HTML file, an image, a Java applet, a video clip, etc. that is address 
by a single URL. Most web pages consist of HTML files and several referey 
objects or links. HTTP defines now browsers request web pages from sen 
and how servers transfer web pages to clients i.e., in essence it defines( 


header and body. The header 


Description 
Represents the class of the element and is used to render the 
content. . 

Gives the direction to directionally neutral text; you can set 
dir this attribute to ltr for left to right text direction or rtl for right 


s $ t to left text direction. 

interaction between the web client and the web server. When a user requ id Represents unique alphanumeric identifier for the element. 
a web page (for example, clicks on a hyperlink), the browser sends HI ln | Represents base language used for the element. 

request messages for the objects in the page to the server. The server rece! E 


the requests and responds with HTTP res 


; Represents the version of the language used. This attribute has 
i ponse messages that contain | version 
objects. ] 


been marked as deprecated. , 
xmlns Declares a namespace for custom tags in an HTML document. 
(i) The «head» Element — The <head> ae ae Lin 
i ; " | information about the HTML document, such as its title, keywords for search engines, 
ed ig MENU of an HTML datiment jg show in fig H and a base address for URLs. Table 2.2 lists all the attributes of the <head> element. 
vei is interpreted, the browser will display the following! Table 2.2 Attributes of the «head» Element 
page (fig. 2.2). 


Q.3. Describe the structure of an HTML document. 


Attribute. Description 
Represents the class of the element and is used to render the 
content. 


7 ; set 
Gives the direction to directionally neutral text; ien right 
this attribute to I tr for left to right text direction 0 


Class 
<html> 
<head> 
<title>Title of page</title> 
</head> s 


dy to left text direction. 
i m ld 5 i e identifier for the element. 
TN de d on ad Represents unique alphanumeric zo - 
: y aon R ment. 
"n lang epresents base language used for the ele! 
</html> 


data 
i 7 te-space separated meta 
Profile |Gives the location of one or more white-Sp: 


document. 
IL [Profile URLs for the current do 
Style Represents inline style indicating how ti 


: t. 
Holds additional information for the elemen! 


Fig. 2.1 Example of 
an HTML Page 


o render the element. 
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Table 2.3 Elements to be Added to the <head> Element 


Las Description 
Attribute = 
Zbase> Represents base URL for the document. 
Zbasefont> (Represents base font for the document. 
Zbgsound> | Represents background sound. 
Zisindex> |Represents rudimentary input control. 
3 Represents a relationship between the document and anothey 
<link> object. en - 
<meta> [Represents header information. 
` Represents hint for the name value to use when creating am 
<nextid> hyperlink element. 
i Holds text that only appears if the browser does not supporti; 
<noscript> | <script> element. 
«script» |Holds programming script statements, such as JavaScript, 
«style» — |Includes style information to render the content. 
<title> Represents title of the Web page that appears in the Web brow 
Pi pag pP à 


(iii) The <title> Element — The <title> element contains the tit 
the HTML document, which appears in the title bar of the Web browsera: 
used by search engines to refer the document. Each <head> element sh 
contain a <title> element. 


Table 2.4 Attributes of the <title> Element 


Attribute Description 

Glass Represents the class of the element and is used to render 
content. 

id 


Represents unique alphanumeric identifier for the element 
Represents base language used for the element. 


Represents inline style indicating how to render the elem 
(iv) 


of the HTML The <body> Element "he <body> element contains thet 


document, which includ i i 
"iri cludes the entire content that will app 


ser. It can also include text, images and multimedi 
Á L > elem 
Table 2.5 lists all the attributes of the <body> elent TUS 


Table 2.5 Attributes of the <body> Element 


lang 
[ style 


Description 

Specifies the color of the h; 
you can set this attributes 
value. This attribute has b 
Represents the URL ofa 
background of the brows: 
as deprecated, 


yperlinks when they are clid 

to a predefined color nam 
een marked as deprecated. | 
graphic file, which is used 55, 
er. This attribute has been ™ 
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Specifies the color of the background of the browser. Yo 
can set this attribute to a predefined color name or a ox 
value. This attribute has been marked as deprecated. 
Indicates if the background should Scroll when the text 
scrolls. If you set this attribute to fixed, which is the only 


allowed value, the background will not scroll when the text 
scrolls. 


pgcolor 


pgproperties 


bottom margin Specifies the bottom margin, which is the empty space at 


the bottom of the document, in pixels. 


class Represents the class of the element and is used to render the 
content. 

dir Gives the direction to directionally neutral text. You can set 
this attribute to ltr for left to right text direction or rtl for 
right to left text direction. 

id Represents unique alphanumeric identifier for the element. 

lang Represents base language used for the element. 

language Represents scripting language used for the element. 

leftmargin Specifies the left margin, which is the empty space to the 
left of the document, in pixels. 

link 


Specifies the color of the hyperlinks that have not yet been 
visited. You can set this attribute to a predefined color name 
or value. This attribute has been marked as deprecated. 
Gives the height of the top and bottom margins, in pixels. 
Gives the width of the left and right margins, in pixels. 
Specifies the right margin, which is the empty space to the 
right of the document, in pixels. . 
Specifies whether a vertical scrollbar appears to the right of. 
the document. 

Specifies whether a vertical i 
the document; you can set this attribute to yes 
default value for the attribute) or no. d 
Specifies the color of the text in the document. bi ges 
this attribute to a predefined color name or va ue. 
attribute has been marked as deprecated. " 
Holds additional information for the element; such as Hd 
Specifies the top margin, c is the empty space a 

top of the document, in pixels. — 
Specifies the color of the hyperlinks that have Veiis 
You can set this attribute to a predefined bon 

This attribute has been marked as deprecated- 


marginheight 
marginwidth 
rightmargin 


Scroll 


llbar appears to the right of 
me (which is the 
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3 r Text Markup Language (HTML) ? Explain 
mes Vas (R.GPy,, ju, ttt 
e 4 


une 2 j 
Ans. HTML — Refer to Q.1. , 
HTML Elements — Refer to Q.4 (i). 


Q.6. Discuss the elements located within <head> and </head> elena 
Ans. Some of the elements located within <head> elements are discusseq bd 
(i) Prologue — The prologue component is only a comment Whi 
tells about the HTML version. 
<! Doctype HTML 4.0> 
(ii) Link — The link tag is used to inform the browser's Previg 
and next document, to link the banner and to inform about the location ofi 
base document. 
«Link rel = previous href = "prev.htmI" 
«Link rel = next href = “next.html”> 
«Link rel = banner href = “bann.gif’> 
(iii) Base — This tag specifies global reference values for hrefz 
target attributes. The syntax is 
«base href = "base url» or «base target = "frame name" 
The attribute href specifies the reference URL that is used to help comp: 
relative URLs. The attribute target specifies the default frame name to wht 
all links are targeted. 
(iv) Meta — This tag defines the document’s meta information si 
as keywords, expiry date, author, page generation software used etc. Ita 
supports client pull, a dynamic technique in which the browser loads al 
document after a specified delay. For example, 


<meta name = “author” content = "xxx" 


<meta name = “keywords” content = "HTML, XML, DHTML? 


(v) Script — This tag contains the code refe di bod! 
the document. The Syntax is as follows — Ss i 


<script language = “VBscript”> 
- - - script code 

</script> 
(vi) Style — The style ta; i 
£ speci 

document. The Syntax is given below 

<style type = “mime_type”> | 
For example, | 
<style type = “text/css”> 


~~~ Style statements 
</style> 


fies the style information for! 
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Q7. Explain with examples the various text formatting and font 
iputes- i 
iet The page content in the body of the Web page can be preseited j 
eat WAY using different tags such as <em>, <strong>, <font>. The - tei 
an 5s used to make the text in italics. The <strong> tag is used to maleter 
d Fig. 2.3 shows the output of the following code — s 


Stop Refesn 
indowsWProfilestwaheguru Desktop, S] 


Hello World 


The world is so beautiful 


WO E 
Fig. 2.3 Using Text Formatting Tags 
<html> 
<head> 
<title> Text formatting </title> 
</head> 
<body> 
<h1 align = center > Hello World </h1> 
<p> The world is so beautiful.</p> 
<br> 
<p> The most beautiful creation of the world is the 
<strong > <em> human kind.</strong> </em> 
</p> 
</body> 
</html . R 
_, The <font> tag is also used for text styling. This tag contains various 
attributes Such as face, color, and size. For example, 
<P> <font color = “red” size = “+1” face = “Arial”> ..... te fonts </p> 
The color attribute indicates the color of the text, size attribute is -— 
ks change the size of the text being formatted. To make the text larger, se 


in =+ ax” and similarly set size = “x” to make the text smaller, where : 
ea number of font point sizes. The attribute face refers to the type o 
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0.8. Describe the header tags. Also discuss various attributes ali 
uN 


the headings. 


Ans. Headings help to 
define the format and structure 
of a document and highlight 
important topics. Headings in 
HTML are defined with the 
<hl> to <h6> tags. For 
example, «hl» defines the 
largest heading whereas <h6> 
defines the smallest heading. 


eg lianing text Mictosolt Intemet Explorer 


"Eie Est Men 


3j Headings Example - Microsoft Intern 


IS Peer Stop fed ru ; 
| 14d&es [i CAWindows\ProflesiwahegurviDesktop\ 
This is heading H1 
This is heading H2 


This is heading H3 This " f 
ti z . { 
This is heading H4 ext is aligned in the right, = 


This is heading H5 


EM This text is aligned in the center, 


H This text is aligned in the left. 


This is heading H6 
[ET bene vi BT 


HTML automatically adds an 
extra blank line before and after 
a heading. 


NL 3277 


Fig. 2.4 Heading Output 


Fig. 2.4 shows the output screen of the following HTML code — 
<html> 
<head> 
<title> Headings Example </title> 
</head> 
<body> 
<h1> This is heading H1 </hl> 
<br> 
<h2> This is heading H2 </h2> 
<br> ' 
<h3> This is heading H3 </h3> 
<br> 
<h4> This is heading H4 </h4> 
<br> 
<hS> This is heading H5 </h5> 
<br> 
<h6> This is heading H6 </h6> 
<br> 
</body> 
</html> 


Al n 1 | 

Pace the Heading - In HTML we can align our text and disp! 

ete our Tequirement on a Web page. By default, the text en! 
pears left-aligned on the Web page. We can use the align att 


to change the ali; 
iil Hibeaná m" of the text. The values ofthe align attribute are? 


Fig. 2.5 Aligning the Heading 


Fig. 2.5 shows the output screen i 
g 25 UN p of the following HTML code — 
<head> 
<title> Aligning text 
</title> t 
</head> 
<body> 
— A — "center" > This text is aligned in the center. </h2> 
r- 


<h2 align = “left” > This text is aligned in the left. </h2> 
<br> 

a = “right” > This text is aligned in the right. </h2> 
</html> 


Q.9. Discuss the paragraph tag. 


is = When we write texts within the heading tags or within the <body> 
ah ML only recognizes single spaces between characters. The <p> tag 
s S a block of text as a paragraph. The tag <p> marks the beginning of a 
Paragraph, and the </p> tag marks its end. This tag also consists of align attribute. 
ML automatically adds an extra blank line before and after a paragraph. 
Fig. 2.6 shows the output screen of the following HTML code — 
<html> 
<head> 
<title> Paragraphs Example </title> 
</head> 
<body> 
<h1> This is heading H1 </h1> 
<p> This is a paragraph </p> 
<p> This is another paragraph </p> 
</body> 
</html> 


d Web Technology 
n we want to end a line. This tag does hot 
g forces a line break wherever you plac, i 
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The <br> tag is used whe! 
a new paragraph. The <br> ta 


Tp Paragraphs Example = Micros 


ert 


[He ER Yen Faveney “Tac 


TORT pec 9 
Ee Jo Fwd. ln. Bele 
This is heading H1 |. — Dm ew SIG 


This is a paragraph 
This is another paragraph Hi 
Fig. 2.6 Paragraphs Output 
Fig. 2.7 shows the output of the following code — 
<html> 
<head> 
<title> Line Breaks Example </title> 
</head> 
<body> 
<p> This <br> is a para <br> graph with line breaks 4 
</body> 
</html> 


is a para 
graph with line breaks 


ae [le e 7 
Fig. 2.7 Line Breaks Outpyi 


Q.10. Explain the commenting code and color in HTML. 


Ans, Commenting Code — The comments are enclosed in the spi 
tags <! — Comment — —. This element is used to add a comment to an HT! 
document. An HTML comment begins with < ! — this and the comment ent 
with — — >. 

Font Color — Color can be set to a English language name, hexadet# 


or RGB value. The < font > tag is also used for styling. This tag com 
various attributes such as face, color and size. 
For example — 


“+x” and similarly set size = “ 
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For example — <body bgcolor = “reqs 


A comment will not appear in a web brow 


Y= Sa ser wh ; 
displ ayed- It is only visible when the sourced code is viewed, en the page is 
program 
<html> 
<head> i 
<title> A simple color example </title> 
</head> 


<body bgcolor = “red”> 

<h1> hypertext markup languages <ļ|hj> 
<P align = center > < font color = “Black” 
size “+1” face = “Arial”> </font> </P> 
</body> 

</html> 


"Q.1I. How will you create hyperlinks in Web documents ? 

(R.GP.V., Dec. 2015) 
Or 

How do you create a link ? How do you link to a location in the middle 
of an HTML document ? (R.GP.V., June 2013) 
Ans. A hyperlink is a link between Web pages and when you click 
it, you move to another Web page or some other section of the same 
Web page. You can create a hyperlink by using the anchor tag (<a>). Inside 
the <a> tag, give the reference 
of a Web page that you want 
to open. The href attribute of 
the <a> tag takes the reference 
ofthe Web page. The term href 
stands for Hypertext Reference. 
Fig. 2.8 shows the out- 


Put screen for the following 
Code — 


) ^ | g 
SNE C:\Windows\Profiles\wahegurulDe 3] iets 


<html> 

<head> 
<title> Hyper link Example </title> 

</head> 

<body> 
<h3> That tag will create a hyper link.</h3> 
<br> <br> Es 
<h5> <a href = "http : /iwww.google.com/ 

Visit Google! </a> </n5> 


Fig. 2.8 Hyper Link Output 


</body> 
</html> 
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the following task — 
. Write HTML Tag to perform 
worm a picture as a background on your Web pages, 


(ii) How do you a 
(iii) How do you ma 


6i 


dd scrolling text to your page 2 
ke clickable image link ? 


iy) How do you make it so that someone can mail you by: 
(iv) (R.GPY, June Ai 


clicking on text ? 
an be embedded into the Web page. To add image 


. (i) Images C ; B BES a, 
N- for e whole Web page, the following format is used ài 


«body background — "bg.gif 
(i) The <MARQUEE> tag is used for this purpose. The text inclu 
between the tags is transformed into a scrolling text from right to left, 
<MARQUEE> 
Welcome to India 
</MARQUEE> 
(üi) To create a hyperlink image, first create an anchor tag (<a>) a 
give the reference of an HTML page through the href of the <a> tag. Inside 
<a> tag, create a <img> tag and give the reference of an image file throught, 
src attribute of the <img> tag. When you click the image, the referenced py 
opens in the Internet Explorer. 
<a href = “pagel.html”> 
<img src = “c:\users\public\pictures\sample pictures crane jy 
alt = “The crane in the sky" | 
</img> | 
</a> 
(iv) An e-mail link uses the mailto:protocol and gives visitors! 
easy way to communicate with you. The mailto:protocol is not an Ht 
standard, but it is widely used and recognized, To create an e-mail link, 
an anchor link with the mailto:protocol indicator and the e-mail address. 
example, you might include a link to send the e-mail with a link liket 
following — 


<a href = “mailto://info@shivanibooks.com”> send feedback <? 


245. How will you create unordered and ordered lists ? 
Or 
an many types of list are supported by HTML ? Explain each oni 
A (R.GRY, June 
mE cry types of lists in HTML, unordered and ordered 
Inside, each i one ES items marked with bullets. It starts with 
» each item starts with «li». On the other hand, an ordered list PT 


of items marked wi : j 
Misit with numbers. It starts with <ol>. Inside, each item $ 


. HTMI 
The allowed types of lists are as follows — "m 


(i Numbered Lists — 
l Type = “A” Number or letter with w 
„arts. Other options are a, b i, or 1 (by defauto, 
(i) Bulleted Lists — 


Type = “disc” Bullet type to be used, Other options are 


hich the list should 


square and circle. 
Fig. 2.9 shows the output for the following HTML code for anandeed tst 
<html> 
<head> 
<title> Unordered List Example </title> 
</head> 
<body> 
«hl» This is a List </h1> 
<ul> 
<li> Coffee </li> 
<li> Tea </li> 
<li> Milk </li> 
</ul> 
</body> 
</html> 
"b ia the bulleted list to have filled squares as the bullets, instead of 
1 es. We can then modify the «ul» tag to the following (remaining 
things being the same as before). 


<ul type = "square" 


This is a List 
* Coffee 
* Tea 
* Milk 


* Coffee 
«Tea 


[eios 


Fi : no ; 
8: 29 Unordered List Output Fig. 2.10 Ordered List Output 


list, stead of bullets, we can have the items numbered, by using an ordered 
8: 2.10 shows the ordered list output-for the following code — 
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<html> 
d> . 
Sene Ordered List Example </title> 
</head> 
<body> ] 
«hl» This is a list </h1> 
<ol> . 
<li> Coffee </li> 
<li> Tea </li> 
<li> Milk </li> 
</ol> 
</body> 
</html> 


0.14. Explain in detail about the <table> tag. Also explain all its attribu, 
and related tags with examples. 

Ans. The HTML table allows you to arrange data, such as texts, imag, 
links, forms, and other tables. In a table, data is arranged in the form ofro 
and columns of cells. It allows specification of arrangement of cells but dx 
not allow cell content to be aligned as flexibly as one would sometimes lik 

The syntax is 

(i) <table> ..... </table> 
(a) align = left, center, right | 
(b) border= make a border around the table and its cells. | 
(i) Within this, <tr>....< /tr> specifies a table row. | 
(a) align = left, right, center applies to cells. | 
(iii) Within this <td> ..... </td> specifies a table cell, while <th- 
</th> specifies a table heading. 
(a) align = left, right, center applies to cells. 
A simple example is given below — 
<table> 
<tr> 
<td> row = 1, col = 1 </td> 
<td> row = 1, col = 2 </td> 
<td> row = 1, col = 3 </td> 
</tr> 
<tr> 
<td> row = 2, col 2 1 </td> 
<td> row = 2, col = 2 </td> 
<td> row = 2, col = 3 </td> 
</tr> 
</table> 
The result of the above code will look like — 


TOW —l,col-l row=1, col=2 row=1, col=3 | 


tow =2,col=1 row=2, col=2 row = 2, col=3 | 
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Now ile border = 17 
‘<tr> R r 
<th align = right> Head 1 </th> 
<th align = center> Head 2 </th> 
<th align = left> Head 3 </th> 
</tr> 
<tr> P 
<td align = right» Al </td> 
<td align = center> A2 </td> 
<td align = left» A3 </td> 
</tr> 
<tr> 
<td align = right > A4 </td> 
<td align = center> A5 </td> 
<td align = left >A6 </td> 
</tr> 
</table> 


The result of this code will look like — 


We can use attributes rowspan and colspan with the <td> or <th> tag to 
span cells vertically, and horizontally, respectively. For example, <td colspan 
=2> will take up two columns and <td rowspan = 2> will take up two rows. 

For example, 

<table border = 1> 

<tr> 


<td colspan = 2 align = center > Report </td> 
</tr> 


<tr> 
<td rowspan = 2 > football commentators 


we good taste = 10% </td> 


<tr> 
<td> bad taste = 90% </td> 


Std rowspan = 2 > other 


<td> good taste = 95% </td> 
</tr> 


e bad taste = 5% </td> 
> 
</tr> test </td> 


tables 
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0.15. D scribe how will you embed images in a Web documen ? 
.15. Des 


i ility to insert images in Web pages by ys 

e m we the following attributes — his ds 
<img> tag. Let at The src attribute is used to specify the location a 

width, border, rg a js in the same folder where your html file resides, 
image. If your : ie one the full path of the image file in the src atti 
there is po image is in some other folder, then you must specify ther; 
Sate em file in the src attribute of the <img> tag. t 
pa Height and width specify the size, and another important attribute wd 
which is provided for browsers BYRIFURUE 
that have images turned off or E NE 
that cannot have images. The OT 2 a a | a 
value of alt will appear on screen : pasen ey | oe i 

in place of the images. = 

à Fig. 2.11 shows the output 
screen for the following code — 


Displaying Alternate Text for an Image 1 


<html> : 

<head> [A window picture] ! 
<title> Image un | 
</title> Ej Dore [TiC RO duet 71 
<head> Fig. 2.11 

<body> 


<h1> Displaying Alternate Text for an Image </h1> 1 
<img src = "C : \Users\Public\Pictures\Sample Pictures windowji 
alt = “A window picture" 


</img> 
</body> 
</html> 
EN 6. Discuss in detail the de v cd 
What is an HTML form. 


(R.GBV,, June Jl 
Ans. Form is an area containing form 


elements. A form element allows user to. EXXEZZIZZET 
enter information. The various form |j 
elements can be text fields, drop-down | 
lists, radio buttons, check boxes, and so j 


icrosoft Intérnet Explorer 


on. These form elements are enclosed | Pl¢sse fU this form 

inside the «form» and </form> tags. — | sist name e 
The most commonly used form | Miaeuse | — — — — 

element is the «input» tag. The type of | Lastname — 


input being accept 


n ed is specified with the 
type attribute, F 


or example, to accept 


Fig. 2.12 Form Outpt! 
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in a text box, we can specify the following — 
es 


<form? 
<input type = “text? ,,. 


yalu 


Fig. 2.12 shows the output for the following html code. 
<html> 
<head> 
<title> A Sample Form < /title> 
</head> 
<body> 
<h3> Please fill this form </h3> 
<form> 
First name : 
<input type = “text” name = “firstname”> 
<br> 
Middle name : 
<input type = “text” name = “middlename”> 
<br> 
Last name : 
<input type = “text” name = “lastname”> 
</form> 
</body> 
</html> 


Table 2.6 shows the various attributes of the input tag that is used to 
create forms. 


Table 2.6 Form Attributes 


Tag / Attribute Use 
<input> Sets an area in a form for user input 
Type=“_ » 


Text, Password, Checkbox, Radio, File, Hidden, Image, 
Submit, Reset 


Processes form results 


Value =“... Provide default values 

Sesti Sets visible size for text inputs 

Maxlength =“n”| Maximum input size for text fields wl 
Selecteq tially displayed or reloa 


Default selection when form is in! 
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— CTER ENTITIES, FRAMES =~ 


E 'A TAGS, CHARA 
| XHTML, MET. " "FRAME SETS AN 


7, Describe the XHTML. (R. GEF., June 2015, » 
Ans. XHTML isa combination of HTML and Extensible Markup Lag 
(XML); and is mainly created to enable the code to run on browsers a 
limited capabilities, such as mobile phones and other wireless devices, 
syntax of XHTML is almost similar to that of HTML. However, certain m 
are to be followed to script a document in XHTML. 


i 


XHTML was created for two main reasons — 


(i) To create a stricter standard for making Web pages, Teduciy 
compabilities between browsers. : 

(ii) To create a standard that can be used on a variety of diffe 
devices without changes. 

Q.18. Discuss document type declaration in XHTML. 

Ans. Every XHTML document must begin with a document typ 
declaration. Each HTML specification provides such a declaration that cank 
used at the beginning of documents intended to conform with the specificatin 
However, there are three flavours of both the HTML 4.01 and XHTMLI! 
specification, each with its own document type declaration. Each flavor 


contains a somewhat different set of elements and attributes. The three flavo 
are — 


| 
(i) Strict- The W3C's ideal for HTML as of late 1997. | 
(ii) Transitional — A superset of Strict HTML that inclut! 
deprecated elements and attributes i.e., elements and attributes that should 
be used if possible because they will likely be eliminated from HT 
recommendations at some future time. 
"—- m Frameset — A superset of the Transitional flavour that incl? 
ature allowing several subwindows (or fr i withia! 
browser’s client area. à un. © Oe displayed | 
x The recommended XHTML 1.0 Strict, XHTML 1.0 Frameset, and unit 
-01 Transitional document type declarations are — 
<!DOCTYPE html 


PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN" 


"http : //www.w3.org/TR/xhtmll/ i s 
PR ue 'DTD/xhtmll-strict.dtd 


ERIS "-//W3C//DTD XHTML 1.0 Frameset //EN" 
D//www.w3.org/TR/xhtm/DTD/xhtmll-frameset.dtd"? 
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ApoCTYPE p 
PUBLIC *-//W3C/DTD HTML 4.01 Transitional EN 
«http : //www.w3.org/TR/html4/loose.dtd”> 


of these is included for informational Purposes, so that we can 


st A 
mer f it is included in a document. 


recognize iti 

Q:12. Discuss the difference between HTML and XHTML with respect 
elements. (R.GP.K., June 2014) 

Ans. There are five major changes in XHTML from HTML — 

(i) Elements must adhere to case-sensitivity. 

(i) All elements must be closed properly. 

(iii) Empty elements must be closed. 

(iv) Attribute values must be enclosed within quotation marks. 
(v) All attributes must be fully moved. 

In HTML, you are free to type elements in uppercase, lowercase or a mix 
of both. For example, the following are three ways the body element can be 
written in HTML — 

<body> 
<BODY> 
<bOdy> 

But as a subset of XML, in XHTML, all elements must be written in 
lowercase. Consequently, here, only the first example isa valid XHTMLelement. 

Many HTML users learned that many elements did not need to be closed 
in order. For example, the paragraph element <P> and the line element </i> as 
shown below — 

<P> This a sample 
<ul> 

<li> Item 1 

<li> Item 2 

</ul> 


d. 
Foran XHTML document to be well formed, all elements — 
Srefore </P> and </li> are no longer optional, they are now mal . , 
fall elements must be properly 


SIME empty elements must be epi nts, that do not have matching 


In 
Close, - 
diee OR does we deal with empty HTML eleme of empty elements 1n 


‘elements ? Th mmon examples insertin; 
s a and ies eee ten a thatempty elements bo os eis 
sh (/) after the element itself. Thus, in ue 


<br/>. : n pn” e”/>. 
and <img src = “filename”> becomes <img S^ ^ fico 


E | 
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Q.20. Discuss some syntactic aspects of attributes in XHTML, 


" XHTML 1.0 document must conp: 

. The htm! element of any Ontair 

r etri specification. It turns out that every HTML element has, 
e butes that can be specified for it. The values of an elem, ^ 


" 


iated attri cs dd : 
wi ie influence how the element is displayed or how it behaves, o 
a 


identifying information. For example, the xmlns attribute ie, 
non de the document, which can be considered ideni 
i tion. 
Pn XHTML attribute specifications have the form shown for Xn. 
white space separates the attribute name from the element name in the s 
tag of the element. The attribute name is followed by an equals sign (- 
optionally preceded and followed by white space, and the value of the attri, 
enclosed in quotes follows the equals sign. A pair of single quotes or doy, 
quotes may be used to quote the attribute value. The attribute value string T 
not contain the character used to quote the string, but it may contain the oll; 
quote character. Hence, an attribute specification like. 
value = Ain't this grand !” 
is legal, but 
value = “He said, "She said", then sighed.” 
is not. However, references may appear within an attribute value, so 
value = “He said, &quot; She said&quot; then sighed.” 


is valid. The &quot; references will be converted to double quotes when th ` 


document is parsed. 


Multiple attribute specifications can be included within a single tag b, 
separating the specifications with white space. For example, it can be usefl 
to some applications, like search engines and accessibility software, to identi 
the human language in which the character data of the document is written.4 
standard way to do this is to include lang and xml : lang attribute specificatios 
in the html start tag. Both attributes are used so that the document will 
compatible with software that understands HTML 4.01, which does not conti 
the xml : lang attribute, as well as with software that understands XML, whit 
defines the xml:lang attribute for use across arbitrary XML-based languag“ 
including XHTML. An html start tag containing attribute specifications f 
both of these attributes as well as xmins is 


<html xmins = "http://www.w3.org/1999/xhtmI"lang-"en" 
xml : lang = “en”> 


This assigns the value en (i.e., english) to both of the language attrib“ 
Multiple attribute specification 


s can appear in any order, therefore 
<html xml : lang = “ y d 


= "en" xmins = "http;//www.w3.org/1999/xhtml" 
lang = “en” > 


1S same as the previous Start tag. 
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tinaly itis good practice to observe Certain restrictions On attribute values 
compatibility across different browsers, First, newline characters 
eit ‘appear within an attribute value. In other Words, an attribute valu 
pould 9 car on a single line. Of the four white space Characters, it is best i 
should APh space character within an attribute value, Furthermore avoid 
use 0n y any leading or trailing white space, and also avoid having multiple 
ort" space characters within attribute values. If we follow these 
ai our attribute values will be normalized. Some browsers may 
onm all attribute values whereas others may not, so normalizin g the values 
ai shoul d ensure consistency across browsers. 
urs 
o 0.21. State the importance of <meta> tag. 
Or 


what do you mean by meta tags ? (R.GPV, June 2015, 2016) 


Ans. The meta tag defines the document’s meta information such as 
keywords, expiry date, author, page, generation software used, etc. It also 
supports client pull, a dynamic technique in which the browser loads a new 
document after a specified delay. For examples, 


<meta name="author" content ="yyy"> 
«meta name="keywords" content-"web technology, HTML, CGI"> 


Q.22. Explain how special characters are handled by a Web browser. 


Ans. Another troublesome aspect of HTML is that a few characters 
must be used carefully in HTML documents. For instance, the less-than 
symbol (<) is the special symbol used to begin tags. You may reasonably 
assume that the less-than symbol would only be treated specially if it was 
followed by an element name such as head or p. Instead, a browser will 


always view a less-than as the beginning of a tag, regardless of what 
follows, 


instead of 
To produce a document that displays a less-than symbol, instea 


ping the symbol itself into the document, we use a type cen 
4S a reference, For example, &lt; is a reference that represents th e a 
Symbol. A reference within an HTML document always oe between 
“mpersand (&) and ends with a semicolon (;). The form alee ee which 
these characters determines the type of reference. A reference like ird 
Uses à Mnemonic name for the character referenced, is known a 


fs ity 
r i esponding enti 
‘ference. Table 2.7 shows characters and their corresp 

Teference 
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Table 2.7 Example Entity and Character Reference, 


Entity Reference — me d 

&lt; 

&gt; &#62; 
&amp; &H#38; 
&quot; &#34; 
&apos; &#39; 
&copy; &#169; 
&ntilde; &#241; 
&alpha; &1945; 
&forall; &#8704; 


Q.23. Explain how XHTML white space characters within charac 
data are handled by the Web browser. 


Ans. The character data of an HTML document is the information thy 
lies outside the markup of the document, and to a large extent is the textu 
content of the Web page produced by the document. With a few exception, 
any XHTML white space characters (table 2.8) within character data are treate 
by the browser as word separators, and the specific white space character(s) 
used to separate words, as well as the number of characters, is considere 
irrelevant. In a language like English, the net effect of this treatment of whit 


space is that the browser replaces any string of white space characters willi 
character data by a single blank. 


Table 2.8 XHTML White Space Characters 


ASCII Code 
(Decimal) 


Character 


Unicode Standard Value 
000D 


Carriage return 
Line feed 


Consider the following HTML docume: 
handling of white Space in element content — 
< ! DOCTYPE html 
PUBLIC "//N3C//DTD XHTML 1.0 Strict //EN" 
He htp:/WWw.w3.org/TR/xhtml /DTD/xhtml] -trict dtd"? 
tml xmlns = http Vw Ww.w3.org/1999/xhtmp- 
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HelloFriendsWhiteSpace htm 
</title> 
</head> 
<body> 
<p> s 
Hello Friends. 
This is another HTML paragraph. 
</p> 
</body> 
</html> 
Fig. 2.13 shows the output screen for this HTML code. It should be noted 
that although the text within the p element is typed into the HTML document as 
two paragraphs, the browser displays all of the text as a single paragraph with a 
single space between the two sentences, and in fact even performs rewrapping 
of the paragraph so that the paragraph fits within the browser window. 


AQ HelloFriendsWhiteSpace.html-Mozitla [- tx) 
St RA 


Hello Friends. This is another HTML 
paragraph. 


Fig. 2.13 
A simple way to tell the browser that the text in this example to be displayed 


as two paragraphs is to use two p elements instead of one — 
<p> 
Hello Friends! 
</p> 
<p> 
This is another HTML paragraph. 
</p> i 
Fig. 2.14 shows the output for this html code. 


; i x 
© HelloFriendsTwoPara.html - Mozilla pax) 
pe a 


Hello Friends ! 
This is another HTML paragraph. 


Fig. 2.14 
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Q.24. Explain the handling of unrecognized elements and attributes, 


the Web browser. u 
Ans. A feature of HTML is that browsers do not complain if a docum, 


contains element or attribute names that a browser pst recognize. p 
attributes with unrecognized names, the browser ue ai the attribute à 
present at all. For unrecognized element names, the browser displays à 
content of the element as if the markup were not peus 

For example, suppose that we leave off the “e” in title in the title start ta 
as in the following example — 


<!DOCTYPE html . 
PUBLIC *-/W3C//DTD XHTML 1.0 Strict//EN” 


“http «/www.w3.org/TR/xhtml L/DTD/xhtmll -strict.dtd"> 
«html xmins = “http://www.w3.org/1999/xhtml”> 
<head> 
<titl> 
HelloFriendsBadElt.html 
</title> 
</head> 
<body> 
<p> 
Hello Friends ! 
</p> 
</body> 
</html> 
Fig. 2.15 shows the output screen for this code. 


X Mozilla 


Hello FriendsBadEIt.html 


Hello Friends! 


Fig. 2.15 : 

In this example, the browser treats the content of the titl element as iff 
were text typed directly within the head element. Text is not suppose 
appear here, and the HTML standard does not specify how a browser sho 

display such information. Mozilla chooses to display the text as if it we 


initial content of the body, as shown in the figure. Note that the title bar of tt 


window does not display this text. 


This handling of unrecognized names is important because it allows gn 


to continue to evolve. For example, if an XHTML 1.2 standard is some! 
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uses character data within the 
na bit when displayed, page 
ing element in their documents. 
ment will still display character 


eased that contains a sproing element that ca 
re nt of the element to bounce up and i 
conte! scan immediately begin including the Na 
utho! s that do not recognize the sproing ele 
ntained in this element. 


One implication of HTMU' handling of unrecognized i 
n HTML page may display correctly in a browser but el Set 


l 3 
s in its markup. For example, consider the followin hc dca 
<p> 


error g code — 


Hello Friends ! 
</p> 
<7> 
This is another HTML paragraph. 
</p> 
The second paragraph mistakenly begins with an 7 tag. Because 7 is not 
avalid element name in HTML, this tag will be ignored. Yet Mozilla will still 
display this document as shown in fig. 2.15. This is because, for display 
purposes, Mozilla treats text that is contained directly in the body element as if 
it were the content of a p element. Although, it displays properly, such a 
document could lead to other problems. For example, if this document were 
later processed by some other software, say a program converting XHTML 
documents to plain text, it would likely produce an error. 
A good idea, to avoid such problems, is to check the validity of the HTML 

in a document using means other than simply loading the document into a 
browser. An XHTML document is valid if it conforms with the XML grammar 
defining the syntax of the language. One way to perform validation checking 
is to use an HTML validator like the one available at the W3C [W3C-VAL]. 
This program will analyze your document and not only catch typographical 
errors, but also help you to ensure that the HTML you generate conforms to 
the standards of the HTML version used. 


9.25. Explain in detail about the frame element. 
.. Ans. Framed layout is the one in which the browser window is broken 
into two or more sections called frames. Each section can contains different 
HTML documents. The <frameset> tag is à container for frames and replaces 
the body tag and <frame> tag is used to place the contents into the frame. 
<frameset rows = “value” cols = “value” 
in The above tag takes attribute rows or cols. Itthe win 
-°rlzontal stripes then the row attribute should be us: 
es, then cols attribute should be used. Both the atiri 
at the same time. For example, the following code 
9 regions in row wise 
<frameset rows = “30%, 10%” > 


dow is to be partitioned 
ed. If in the vertical 
butes should not be 
ie divides the window 
into 
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The frame tag is used to place different HTML documents in each 5 


<frame sro=“URL” — i 
name = “name 
frameborder = “01” . 
scrolling = “yes | no | auto” > 
Another tag is <noframes>, which is used when browser does not Sip, 
frames. If the browser does not support, the content placeq ben, 
> tag is displayed. 
cert ne the output for the following HTML code, 
<html> 
<head> 
«title» Myframes « /title > 
</head> 
<frameset cols = “40%, 
«frame src = “mylist.html”> 
«frame src = “table.html”> | 
</frameset> | 
<noframes> 
offers an alternative text if the browser does not support fray 
</noframes> | 
</html> | 


*" 


My favourite search! 
sites i 


EQ 
mese 
* esae: { 
1 
| 


Mügziswachilas suelo oen 


Fig. 2.16 HTML Document having Frames 


Q.26. Write an HTML code to show how one vertical frame wid 
and second vertical window is further split horizontally using nested fr! 


D 
GP V, June 
Ans.<html> im 


<head> 


<title> Frames </title> 
</head> 


<frameset cols = “50%, 50%”> 


frameset ? 


j did 


<frame src = “framel.htmi”> 
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<frameset rows = «s 


0%, 50%> 


<frame sre = “frame2.htm)'s 
<frame sre = "frame3 html 
</frameset> 
</frameset> 
</html> 


0.27. Write a HTML code to create the following frames, Wh 
es. What is a 


Rajiv Gandhi Praudyogki Vishwa, 


vid 
Bhopal, M.P. Mai 


Menu 


* About us 
* Scheme We 
* Results eume 


(R.GPV,, June 2010) 
Ans. The main html page code containing reference to the three frames is 


as follows — 


<html> 
<head> 
<title> Frames Example </title> 
</head> 
<frameset rows = “30%, 70%”> 
«frame src = “pagel.htm’> 
<frameset cols = “50%, 50%”> 
«frame sre = “page2.htm”> 
«frame src = “page3.htm”> 
</frameset> 
</frameset> 
</html> 
The code for the pagel.htm is as follows — 
<html> 
<head> 
<title> page1 </title> 
</head> 
<body> yogki Vishwavidyalaya 


<p align = center> <em> Rajiv Gandhi Praud 
hopal, M.P. </em> </p> 

</body> 

</html> 
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htm is as follows — um 
ge erforms plenty of tasks to display a web ii 
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The code for the pa. 


hat P B : 

Ts n pé separated into different components iiia screen. These 
itle» page? </title> codes ed. The structure of a browser is shown in fig. 2 ur m 
</head> pe () User Interface — It is the space where interacti ` " 

= 1on betwee 
shod menu </p> sd the browser Occurs- Most of the browsers have common inputs fo ae 
p là terface- Some of them are — an address bar, next and back button: hui a 
* yn 1 S, Du 
li» About us </li> ir home, refresh and Sop options to bookmark web pages, ete. © 
<li> Scheme </li> (ii) Browser ngine — It is the piece of cod 
: ; ; : ? le that communicat. 
: d Results </li> inputs of user interface with the rendering engine. It is responsible ion 
"m. di d and manipulating the rendering engine according to the inputs from various 
«tmi» yser interfaces. 
The code for the page3.htm is as follows — (iii) Rendering Engine — It is the part thoroughly responsible for 
<html> displaying the requested content on the screen. It first parses the html tags 
<head> . and then using the styles, it builds a render tree and finally a render layout. 
e Pe 3 </title> which displays the content on the screen. i ' 
ead» - " ; 
<body> (iv) Networking — The fraction of the code written in the browser, 
<br> responsible to send various network calls. For example sending the http requests 
<br> to the server. 
Pe E (v) Java Script Interpreter — It is the component of the browser 
hio ign = center> Welcome </p> written to interpret the Java Script code presented in a web page. 
</html> (vi) UI Backend — This draws basic widgets on the browser like 


en " o 4 combo boxes, windows, etc. 
provides the facility to divid , 
ity to divide the Internet Explorer (vii) Data Storage — Yt is small database created on the local drive of 


many sections by using frameset. A frameset i i i 
á 1 eset in HTML is a way to display mili as : i 
Web pages in the same Intemet Explorer, at the same time. € es pact veli tte computer where the browser is installed. This database stores various files 


Ls ai E well as set the frame border thickness and color 

" , you can apply hyperlink to a frame. 2.29. Explain in brief website structure. d 

RUD EAE. DES ! — Ans. Websi ; E roach to the design an 

pe TER ARCHITECTURE AND WEBSITE STRUCTURE) puine Darriera ee T and functional ertet 

ES - OVERVIEW AND FEATURES Oe LI MILS | Pope structuring of a website and breaking them into sub pen ne 
0.28. Explain the archit to tee NRE and subject mater ive onn Wee ste employs 

ofa browser. 'ecture for both reri ork in which the di o ean of links that ties 
Ans. The browser’s main ability and presentation. It is a 015 


Your websi ‘pes the functional shape 
Stu Miis Site i ture describes 

d nctionality is to fetch the files from er oc ro oe os Z 

e server and to display them on the 


a website į ; 
um in terms of content presentation. B as 
um | " Site and defines your website navigation scheme. A website generally h 
d asically displays html files T I 
containing images, PDF, videos 


arogi 
flashes, etc. in an ordered layout. A 


t directo; à i ich 
ry and several subdirectories whic ages in 
he web has matured over the past decade, the structure of web pag! 
browser i r 
S a group of structured #8: 2.17 Block Diagram 
Browser Architecture 


like cache, cookies, etc. 


User Interface 


pers 


re uniform and 


Xtdtiven ; t predictable. Fig. 
fI 218 n information sites has become T... posed of tht 


= À ee main 
Ws a website's basic structure whic 
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the homepage, the main sections and the Subsections 1 
y accessed by the visitor. 
Basic Website Layout 


sections — 2 
which can be easil 


Home Page 
(Index Page) 


Main Sections 
(Site Index) 


Subsections 
(Content) 


Fig. 2.18 Basic Website Structure 


This type of website structure enhances the flow of information throy 
its content and even helps visitors in easy access. It also provides the webmag 
with an easy means of organizing blocks of data within the site. As shomi 
fig. 2.19, the website structure includes text, links and graphic elementi 
building block of a web interface. Page and site level features use these elena 
to improve the user's experience. All the above given parameters need ti 
carefully measured while designing a website. Yet few parameters like pi 
loading speed, technological support, website openness, data storage £ 
retrieval techniques need to be examined while designing a quality websit! 
give user a thorough navigation of the website in a small amount of tims! 


addition websites timely updation is also one of the major issues for acaden 
institutions and commercial websites. 


Architecture 


d interpreting the requested files, ; 
king of the website is not as pro 
S are to be performed before à W 


it on users screen. Although the wor 
seems, numbers of internal function: 


, “Pport for HTMLS. 


e 
dis 
ri 
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on the user screen. The whole process cóni 
to DNS server, contact to server and renderi 
e further includes following functions like | 
web pas Jes, construct frames, frames layout and fra 
apply oye. mpletion ofall above given steps the des; 
ucce 


pletes in three Steps — 
ing. The rendering of a 
loading HTML, parsing, 
mes painting. After the 
ired web page is displayed 
n a flash of a second by 


ssful comp. 
the user screen. All these steps are executed i; 
on 


making 2 © 
website js S. 


ser to obtain results in a desired amount of time. The working of a 
hown in fig. 2.20. 


192.168.1.5 192.168.1.5 


DNS 


Server mo 
ivanipublications.com rowser 
Sun 192.168.1.5 


www.shivanipublications.com 
Webpage 


Fig. 2.20 Working of a Website 


Q.31. Explain the overview and features of HTMLS. 

Ans. HTMLS is the next major revision of the HTML oe cd f 
seding HTML 4.01, XHTML 1.0, and XHTML 1.1; Qno em siia 
structuring and presenting content on the World Wide Web. rhive bec 
incorporates features like video playback and impe Adobe Flash, 
mua dependent on third-party browser plug mse 

icrosoft Silver light, and Google Gears. illa Firefox, and 

The latest sa aea of Apple Safari, Google Chrome, Mozi a will also 

Opera all support many HTML5 features and nem a wet browser's that 
ave support for some HTML5 functionality. The oe all have excellent 
come pre-installed on iPhones, iPads, and A! adroid p 


st important — 

Features of HTMLS — Here is 2 set of some of the mo: E 

e: : : t 

T ] ces en p — These are like <header>, M 

ew Seman E 

tion forms where new. 

di) Forms 2.0 — Improvement pama ee 3 
have been introduced for «input? £- 


and «sec 


attributes 
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istent Local Storage — To achieve without resorting 
to 


(iii) Pers 

party ipn Web Socket — A next-generation bidirectional commun, 
b applications. . i 

technology for we nae Events—HTMLS introduces events whic 


Server. h 
(v) Se b browsers and they are called server-sent ¢ foi 


web server to the we V c 4 t events 
(vi) Canvas — This supports a two-dimensional drawing gy, id 


rogram with JavaScript. 
Poil) Audio and Video — You can embed audio or vide 
WebPages without resorting to third-party plug-in. 
(viii) Geolocation — Now visitors can choose to share their py 


location with your web application. l 
(ix) Drag and Drop — Drag and drop the items from one locat, 


another location on the same webpage. 
Q.32. Explain in detail about the HTMLS element. 


you can 
o 
On h 


Ans. In HTMLS, there are new elements that are supposed to impr 
the structure of a page, and provide developers with more options for mat, 
up areas of content. 

For example «div class=“article”>...</div> can now be replaced vi 
<article>...</article>. 

HTMLS specification has a list of new structural elements are as follow 

(i) article — An independent part of a document or site, such 
forum post, blog entry, or user-submitted comment. 

(ii) aside — An area of a page that is tangentially connected hl 
content around it, but which could be considered separate, like a sidebati 
magazine article. 

k nav — The navigation area of a document, an area that conti 
du m n Tone areas of the same document. A 
book, a page in a tabbed dialog box SERO n s Of content, such as a chap 

A fme eme w OX, or the introduction on a website hone 
typically containi ooter of a document or of an area of a doc! 

y containing metadata about the section itis withi hor 
s within, such as autho 


(vi) header — " 
the header of an piel ga 3 ssibly the header of a document, but could 1 


elements to mark up ies NA generally containing heading t 
vii) h, - 

such as uM ves 

HTMLS has a 
developer to build a 
JQuery, HTMLS is a very po 
can be used to create brows 
example of a simple game made wj 


links to of 


Q i ingelen” 
gora tagline, up a set of multiple-level heading € 
f f] 


wide set of j . E 
Website, Ope PLOVed features that make it easier 


j Ofthe data, thus, maintaining its usability in 


rei 
2 


' CSS AND JAVASCRIPT | 


STYLE SHEETS — NEED FOR CSS, INTRODUCTION TO CSS, 5 
gASIC SYNTAX AND STRUCTURE, USING CSS, BACKGROUND 
IMAGES, COLORS AND PROPERTIES, MANIPULATING 

TEXTS, USING FONTS, BORDERS AND BOXES, MARGINS, 


PADDING LISTS 


peeve ne 


Q.1. What do you mean by CSS ? Also discuss CSS rules. 
(R.GP.V., June 2013) 
Or 
Define cascading style sheet (CSS). (R.GP.V., Dec. 2010) 


Ans. Cascading Style Sheets (CSS) or simply style sheets are text files 
that contain one or more rules in the form of property/value pairs to determine — 
how element in a Web page should be displayed. 
r organizing the layout of 


Cascading style sheets (CSS) are rules or styles fo anizin 
àn HTML Pater ae its color, typefaces, margins, links and d 
formatting elements. CSS is a mechanism for controlling the style V a We 
document without compromising its structure. By separating visual d 2 
Such as fonts, colors, margins, and so on, from the structural logic of a Web page; 


i re without sacrificing the integ 
CSS gives Web designers, the control they n parie ite: 
from within a single distinct blo 
«font» tags, tables, and 
intenance, and instantani 


Ming typographic design and page layout 

Code, Without havi ng to resort to image maps, 

GIFs, allows for faster downloads, streamlined site m 

Fobal control of design attributes across multiple pages: — " 

saa overrides the default settings [des onem diat by = pet 
€ displayed, and how to use any 


an é : 
d Closing tag to apply style attributes 


Style i jose 
d Sheets contain rules, comp 
fine how styles will be applied. The selector, 


d of selectors an 


such as à redefined 
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element, class name, or ID name, is the link between the HTMI, dos 


the style. There are two different kinds of selectors, types (Hr 


tags) and attributes (such as class and ID names) for global applica 


Q.2. How are cascading style sheet coded ? Explain with an E. 


Ans. A CSS declaration contains two parts, a property (“color 
value (“red”). The basic syntax rule is as follows — 
selector {property | : value 1; property 2: value:2} 
<HEAD> 
<STYLE TYPE = “text/css”> 
«I 
tagname (styleattribute : value;} 


i 


-> 
</STYLE> 
</HEAD> 
Example — 
<html> 
<head> 
<title> The first CSS page </title> 
<style> 
hl {color : red} 
</style> 
</head> 
<body> 
<h1> The first CSS example </h1> 
<p> All the header elements of h1 will appear with font colt 
<h1> Hi </h1> T 
</body> 
</html> 


Q.3. Why we need for CSS ? 


one. E Fe ean to alter the design of all our pages. We only need toe 
PEER ei en changes to our entire website. For example! 
folie emils f red page website for client, In last minute, they re 
all of the pages sida If you do not know the CSS so you will 
sheets, then you could h. "style tag. If you write all pages in cascading * 

These ave to replace one single of code in a master n 

: are some reasons Why this is better 
() CSS save time i 


(ii) Pages load faster 
(iii) Easy maintenance 
(iv) Superior styles to HTML, 


$ 
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How grouping can be used to reduce the size o ip 


4. ti 
Q: s, The size of the style sheets can be reduced usi of the style sheets, 
Ar lectors in comma-separated lists, for Dine ing grouping. One can 
p H1, H2, H3 {font-family : helvetica} 
similarly. declarations can be grouped as follows — 
H1 , 
— : bold; 
font-size : 12 pt; 
line-height : 14pt; 
font-family : helvetica; 
font-variant : normal; 
font-style : normal; 
} 
Furthermore, some properties have their own grouping syntax — 
H1 {font : bold 12pt/14pt helvetica} di 
which is same as the previous example. 


Q.5. Discuss the advantages and disadvantage of using style sheets. 


(R.GP.V., Dec. 2015) 
Ans. Advantages of CSS — 

(i) CSS Saves Time — When we first learn HTML, we are taught to 
set the font face, size, color, style etc., every time it occurs on a page. It means 
that we find ourselves typing the same thing again and again. With CSS, we only 
lave to specify details once. CSS will automatically apply the elements. CSS 
will automatically apply the specified styles whenever that element (s) occurs. 

(ii) Pages Load Faster — Less code means faster download times. 

(iii) Easy Maintenance — To change the style of an element, you 


, only have to make an edit in one place. 


, (iv) Superior Styles to HTML — CSS has a much wider array of 
attributes than HTML. 
Disadvanta: 
ge of CSS - 
Browser C ompatibility — The two main browsers, gere and emn 
sporer, have varying levels of compliance with style sheets vis 
Ome style sheet features are supported and some are not. 


Expl 


26. Di. inheritance in CSS. i 
iscuss the concept of inher! zed element inside — 


Ans. Suppose there is an H1 element es an ipe imn 
HI» The headline <EM> is </EM>IMP% ized is will 

EM t, the emphasized is 
er such as font- 


rties, 
color of the parent element. Other style prope 


T and font-size, are also inherited. 
© Set a default style property for 2 
Slement from which all visible eleme" 


can set the property 


ent, one 
document, Uf HTML documents, 


ts descend. In 
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element does the following function — 
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ibe the classes in CSS. 
the BODY 8. Descr! ded (R-GPV, June 2015, 2016) 
BODY { In style classes method, styles can be created j 
lor ; black; ia xternal or embedded style sheets, You c ia the form of style 
color : 3 . ian classes in € lement to the name of the styl Tenn the class attribute 
background : url(texture.gif)white, of the TMLe HTML element. There M 3 m to apply a style defined ina 
ss to an x a 0 types of styl — uni 
} m yle cla S specific. A universal style class stas with xu e classes — universal 
! h d fr h delem a perator (.) followed 
Some style properties cannot be inherited from the parent eleme, - the class name. The syntax to written a universal Style class is as follows — 
child element. For instance, the background property does not ipo; © <style> 
background of the parent element will shine through be default, — ' ^ class name {class definition} 
</style> 


Q.7. Differentiate the use of CLASS and ID parameter in Creating y 
in the Web pages. 


Ans. Classes can be created to allow referring to a group of style ses 
by name. The CLASS feature is used to do this. The syntax is as follow, 
<STYLE TYPE = “text/css”> 
«t 
.classname (styleattribute : value; 
> 
</STYLE> 
As an example 
<STYLE TYPE = “text/css”> 
-bluemoon { 
color : blue; 
background : white 


} 

-bluemoon EM { 
font-style : normal; 
font-weight : bold; 
color : white; 

; background : black : 

</STYLE> 
<P CLASS = “bluemoon”> This is an <em> example 
</em> of the ‘bluemoon’ style.</p> 


We can use ID in a similar way as CLASS. The difference is thd 


are unique. They can only be appli 7 
n ; pplied o; Dp 
each object to which that style s to SR o We ma 


I 
<STYLE TYPE = “text/css”> | 
# foo {color : green} | 
</STYLE> 
<p ID= 
</p> 


pe 


foo’> This is a green paragraph by virtue of the 


p "'tibutes or combination of these — 
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An element specific style class starts with the element name, followed by 
a dot operator, which is followed by the class name. The syntax to written an 
element specific style class is as follows — 

<style> 
Element name.class name {class definition} 
</style> 

Also, refer to Q.7. 

0.9. What are contextual selectors ? 

Ans. Inheritance saves typing effort of the CSS designers. Instead of 
setting all style properties, one can create defaults and then list the exceptions. 
To give ‘EM’ elements within ‘HI’ a different color, specify as follows — 

H1 (color: blue} 
EM (color: red} . M E: 

When this style sheet is in effect, all emphasized sections hiis 
HI will turn red. But, if only EM elements within HI should turn red, 
be specified as follows — 

H1 EM (color: red} 4 
ents, an 
i The selector is now a search pattern on the stack of cm Moe dii 
llis type of selector is known as a contextual geh Dol ae addressed, a 
e the last simple selector (in this case, the EM € 
and only if the search ches. : 
pattértume SS attributes, 
Contextual selectors look for element types CLA 


d - 


DIV P (font: small sans-serif) 
sted H1 (color: red} 
#w60z CODE (background: blue) 


DIV.note H1 (font-size: pin that have à DIV among the 


Ts first selector matches all P$ yi elements that have an er. 
tors. The second selector matches ut 


94 Internet and Web Technology 


rd selector matches all CODE element, - 
ment with ID — w60z. The fourth selector M 
nt with class note. ul 


of class red. The thi 
descendants of the ele 
H1 elements that have à DIV eleme 


Several contextual selectors can also be grouped together, ag 
H1 B, H2 B, H1 EM, H2 EM (color: red} 


| 
folloy, 


Q.10. Describe the following in CSS — 
(i) Properties of tags (ii) Property values. 


Ans. (i) Properties of Tags - Each HTML tag has some Prod 
associated with it to determine how the browser will render Something | 
instance, a heading tag like H2 is associated with some text properties indy í 
a font color, a font family, and a font size. There is no attribute nameg oy 
that can be part of an H2 tag. However, there is a property that cont 
color that the browser uses when displaying H2 headings, and we can sei 
property by using an in-line style setting like this — 


<h2 style = “color: red;” > It is a heading </h2> 


The different tags support different properties, although all the text 
support the same set of text-related properties. Properties can have mulij 
values, because sometimes the browser cannot comply with the first chi 


specified, so it uses the second choice. The general syntax for specify, 
property value is 


property name: vall val 2 ..... val n; 


A colon separates the name from the value and a space must sept 
each of the alternative values, Finally, the value ends with a semicolon. 
(ii) Property Values — There area number of various types of! 


that are specified using style Settings, including colors, lengths, nun 
percentages and URLs. 


Some of the methods t i ious 1p! 
o specify variou: 
values are given below — J” 


number (a) Colors — We can specify a color by providing a hexsde 
amount n by the “# character. The hexadecimal number indica 

red, : "mr. 
correspond to ceps and blue in the color. The first two hexadecimal 


t mie? 2 
example, he second two to green and the last two indicate Dl 


# 808080 — A shade of gray 


(b) Lengths — ies V 
values are specified irc There are a number of style propere, i 
Spacing etc. Len 


mi 


ds | 
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Table 3.1 " 


Overallheightof  |Hello < SPAN 


Style- 
current font ry 


World</SPAN>Hello World 
Hello<SPAN style=“ i 

= “font-size : 8px”> 
World</SPAN>Hello wi ix 


Hello < SPAN s 


tyle = "font-size : Sin 
World </SPAN>Hello World ac 


Point size Hello <SPAN style = “font. 


size : 8pt» 
(72.27 points/inch) | World-/SPAN-Hello World 


(c) URLs — When URLs are used as a property value, 
specify the keyword url followed by the actual url inside parentheses. 
For example, 


<bodystyle = “background-image : url(http : liwww.cs.rpi.edu)”> 


“font-size : Jem" 


Pixels 


Inches 


Q.11. Explain the methods of using CSS with HTML. Write a suitable 
program to demonstrate. (R.GP.V., June 2013) 
Ans. There are three methods of using CSS — 
(i) Inline Style Sheets — There are four ways to add styles to a 
Web page — 
(a) Embed style sheet within the HEAD tags ofthe HTML document. 
(b) Link to an external style sheet from the HTML document. 
(c) Import an external style sheet into the document. 
(d) In-line style sheet added into the middle of the HTML document. 
Local (inline) style sheet declarations, specific to a single instance on a 
Page, can be used instead of <font> tags to specify font size, color and typeface 
ind to define margins, leading etc. The inline STYLE attribute is woe 
ha Most tags. This allows the author to modify the properties of individual 
“seed regions of a document. For example, : $ ^ 
<h2 style = "color : red; font-size : + 7pt”> It is a heading <h i 
tX here are other ways to make the same changes to this heading, for 
"!Ple, use the FONT tag to modify the font properties. idis 
<h2> <FONT COLOR = RED SIZE =+5> It ra pe Am il 
inen ne various ways to define pane tuus than other tags for 
Changi Cepted as better to use style ont entities. The reason for 
the rendering of text and other docum deringattributes that apply 
les is to easily define modifications to rendering 


entire website. 
5 9f a document, an entire document, or even an 


hnology 
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96 In p bedded Style Sheets — Global (embeddeq) " 
i id ade to an entire document, are recs Within the Sy 
perm id which precede the <body> tag in the HTML q n 
an » 
in the header. | 
are Lion. syntax is used to embed a global style sheet in the hy 
e 


document — 
<html> 
<head> ; 
<title> A Title </title> e 
<style type = “text/css 
1 


[STYLE INFORMATION] | 
— 


yle d 


| 
</style> 
</head> 
[DOCUMENT BODY GOES HERE] 
</body> 
</html> 
(iii) External Style Sheets — Linked style sheet declarations w, 
single style sheet to define multiple pages. They are accessed by multiplet 
with a single link tag, ensuring consistency in a Web site and making ity 
easy to make global changes. These external style sheets provide sewi 
advantages. Web developers and Web managers may share style Sheets a 
a number of documents or sites. The designers can change style sheet witit 
affecting the document. The users can also lead individual style sheets vl 


they are separately available. To access them use the <link> in the head seit 
as shown in the following syntax — 


| 
<head> | 
<link rel = “stylesheet” 
</head> 

Example — 

<html> «1o, 
<head> 
<title> methods <|title> 


<!Example of internal style sheet—> 
<style type = "text/css"- 
p{font — family : 


<!style></head> 


href-"style.css" type = “‘text/css"> 


pen tag—> 


“Tahoma”; color : blue ; font — size = 69} 


<!Example of external Style sheet " 
«line re] = “stylesheet? type = "text/css" href = “external 
<body> us 


<!Example of inli 
<h 


ith 


is is an internal Style sheet </h2> | 


|." Ong 
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<p> This is a paragraph </p> lava Script 97 
<h1> External style sheet 
«[nl7 
</body> 
</html> 
external.css — 
body {color : red} 


hl (text — align : center ; color : green; font _ family : 


0.12. Define various tasks of CSS with example.(R,G p. 

Ans. Setting colors and backgrounds are am 
pe rformed by CSS. Other common tasks are s 
around elements. The most commonly used pr 
below — 


"ver.danes") 


V, June 2011, 1) 
ong the most common tasks 
etting fonts and white space 
operties in CSS are discussed 


(i) Fonts — If you have used deskto; 
past, you should be able to read this little sty! 
Hl (font : 36pt serif) 


p publishing applications in the 
le sheet — 


The rule above sets the font for H1 element. The first part of the value — 
36pt — sets the font size to be 36 points. The second part of the value 
indicates the browser to use a font with serifs. The more decorated seri 
suit My home page well since the modern sans-serif fonts (fonts 
serifs) were not used in his time. The result is shown in fig. 3.1. 


— serif 
f fonts 
without 


My home page 


Ihave been writing books on engineering 


Fig. 3.1 


; rties 
The font Property is a shorthand property by de cu i ain all 
i Š le sheets ai 
Y using it, you can shorten your sty. n ou would 
Sit replace. If you select to use the expanded version, you 
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have to set all of these 50 replace the example above — 
HI { 
font-size: 36pts 
font-family: serif; 
font-style: normal; 
font-weight: normal, 
font-variant: normal; 
line-height: normal; 
} | 
Sometimes you only want to set one of these. For example, you Tay | 
to slant the text in some elements. Here is an example — N 
UL {font-style: italic} | 
The font-style property will not alter the font size or the font family in! 
only slant the existing font. When set on the UL element, the LI h 
inside will become slanted, since font-style is inherited. 
Likewise, the font-weight property is used to change the weight- tidy 
— of the letters. You can further emphasizes the list items by setting t 
ancestor to be old — 
UL{ 
font-style: italic; 
font-weight: bold; | 


el 
lene 


j | 
The last properties, font-variant and line-height, have not been wil 
supported in browsers up to now and are therefore not as commonly mit 
(ii) Margins — A basic tool in typography is setting space P 
clements. The headline above this paragraph has space above it and i 
less) space below it. By default, your browser knows quite a bit about w 
show the various types of elements in HTML for example, it knows 
and BLOCKQUOTE elements should be indented to set them apart fet 
rest of the text. As a designer, you can build on these settings wii 
same time provide your own refinements. Let’s use the BLOCK QUOTES | 
as an example. Here's a test document. | 
<HTML> 
<TITLE> Text to show i 
do margins</TITLE> | 
<P>This is to test the blockquote: | 
<BLOCKQUOTE> “This a. isin quotes" BLOCK a 
<P>And here it ends. | 
</BODY> | 


m tei 
[jg] CAweb\text. html 


This is to test the blockquote: 


"This text is in quotes" 


And here it ends 


gie 


Fig. 3.2 


As you can see, the browser has added space on all sides of the quoted 
text. In CSS, this space is known as "margins" and all elements have margins 
onall four sides. The properties are known as margin-top, margin-right, margin- 
bottom and margin-left. You can change how the BLOCKQUOTE elementis — 


shown by writing a little style sheet — 
BLOCKQUOTE ( 
margin-top: lem; 
margin-right: Oem; 
margin-bottom: lem; 
margin-left: Oem; 
i font-style: italic; 
. The em in the typographical terminology 
Hin has the maximum width and it is usua 
ie above example will result in the vertical m 


means the width of the cl 
ly the width of character W. So, 
argins begins as high as the f 
Te em) of the BLOCKQUOTE and horizontal margins having zero 
c ake sure the quoted text can still be distinguished, it has bang [ 
1^ slant. Just like font is a shorthand property to set several " 
Properties at once, margin is a shorthand property which sets all | 


“Petties. The above example can therefore be written — 
BLOCKQUOTE { 
Margin: lem Oem lem 0em; 
font-style: italic; 
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alue — 1 em — is assigned to margin-top, Fro 

d to margin-right, 1em is assigned to ma, i 
ME With the left margin set to zero N 

i igned to margin: left. "s 

and berceau to set it apart from the ses ofthe text. Seti ^ 

Su helps and adding a background color further amplifies the nM 

oi 


UOTE { 

BO Jem Oem lem Oem; 
font-style: italic; 
background: #EDB; 

A expected, the background color behind the quote has changed, w 

previous example, the color was specified in red/green/blue (RGB) compone, 

One stylistic problem in the example above is that the background al 

or barely covers the quoted text. The space around the quote — the my 
area — does not use the element’s background color. CSS has another kin: 
space called padding which uses the background color of the elemen} 
other respects the padding properties are like the margin properties — they 
space around an element. Let's add some padding to the quote — | 

BLOCKQUOTE ( 
margin: lem 0em lem 0em; 
font-style: italic; 
background: #EDB; 
padding: 0.5; 

} | 

The result of setting the padding is added space between the text andi 

rectangle that surrounds it. : 


The first part ofthe v 
clockwise: Oem is assigne 


(iii) Links — To make it easier for users to browse in hyp 
documents, the links should have a style that distinguishes them from b 
text. HTML browsers have often underlined hyperlink text. Also, va" ious 


schemes have been used to indicate if the user has previously visited 
or not. 


Since hyperlinks are such a fundamental part of the Web. CSS E^ 

support for styling them. Here's a simple example — 

A:link {text-decoration:underline} etl 

ms The above example specifies that unvisited links should be m e 

ict are underlined, as we have specified, but they are also s j 

y ES not. When authors do not specify all possible styles: pue j 
iun rs E a in the gaps. The interaction between author pot 

es ani 5, i iu ; 

dou i x styles (the user's own preferences) is 29° ote 


solution rules, It is called the cascade (the "e | 


| 
| 


: CSS and J: b 
The selector (A:link) deserves speci E ava Script 101 
sanas being an HTML element, but : Hn Probably recognize 
lled pseudo-classes in CSS. Pseudo ui EUN ri of several 
i give style to elements 
the document can not know if a certain link will be visi 


like Asli hee 
Here is à slightly more complex example — € A:link style to unvisited links, 
A:Link, A:visited (text-decoration: none) 
A:hover (background: cyan) 


The last rule introduces a new pseudo-class : hover. Assumi i 
moving à pointing device (like a mouse) the Specified syle will ee 
the element when the user moves the pointer over (“hovers” over) the link. A 
common effect is to change the background color, i 

(iv) Background Image — A URL is needed by background property 
to the suitable image to use as a background. Images which can be employed 
as backgrounds contain whatever the browser helps for the BACKGROUND 
attributed of the <BODY> element, typically GIF and JPEG. 

body (background — image : Url (Van.jpg)} 

CSS adds some special features also. Like background repeat property. It 


| isa most famus background property. These are four types like repeat, repeat- 


X, repeat-Y, or No repeat. You can set the background to repeat horizontally 
(repeat-X), repeat vertically (repeat-Y) or not repeat at all (no-repeat). 
We can edit the style mentioned above to have the body’s background 
tepeat-X by adding background-repeat : repeat-X : 
body (background-image : Url (graphic.jpg); 
color : # FFFFFF; background-color : # 000000; 
background-repeat : repeat-X; } . 
(v) Background Color — Mostly the background-color property is 
employed in conjunction with the color property which sets text color. 
CSS1 style sheets support three basic forms of color specification F . 
(a) Color names — The color include Aqua, Black, — i. 
Gray, Green, Lime, Maroon, Navy, Olive, Purple, Reds SHV" 


‘nd Yellow, These are the same predefined colors from the HTML specification. 


BODY {color : green;} 
Tan (b) RGB Values - The value of 
8° between 0 to 255. Syntax is — 
# test (color : rgb (0, 255.0)... standard, six digit 
(c) Hexadecimal Values — Supports -— ents like 
RRGGBB as used with the <BODY> elem 


BODY (color : # FFFFFF;) 


(Red, Green, Blue) R, G, B 


color form # 


EE —— 
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The text decoration property is used to defined an effec, CN 


Text — 
For example — i 
P{font — family : 
Q.13. Explain border and boxes in CSS. 
A visual separator which separates the margin on tten 
de is known as a border. Color, width andy 
t by you. Also, for each side we can e Ni 
i 


‘TimesNewRoman’, Times, Seriry 


Ans. Border — 
and the padding on the insi 
the whole border can be se 
these properties particularly. l 

At the same time, border width property permits 
to set all four widths in format ABC and Das shown 
in fig. 3.3. The value may be thin, medium, thick or 
numeric value. 

For drawing medium border around every 
paragraph syntax would be as follows — 


p (border width : medium; } 
/*This sets all to medium*/ 


Fig. 3.3 Border in f] 


p(border width : medium medium; } 

/*This sets top/bottom medium then right/left medium*/ 
p { border. width : medium medium medium medium; 
/* Set each A B C and D */ 


Boxes — The CSS box model is essentially a box that wraps around en 
HTML element. It consists of margins, borders, padding and the actual cont 
All HTML elements can be considered as boxes. In CSS, the term “box mot 


is used taking about design and layout. The image given below illustrates 
box model — | 


Explanation of various parts are given below — 


Content — The box content where text 
and images appear. 


Padding — Clears an area around the Padding 
a 


content. The padding is transparent. 


Border — A border th. 


: at goes 
padding and content, i, ud 


Content 


Margin — Clears an i 
l area outsid 
border. The margin is transparent did 
The box model i 
Permits to add 
around elements, and to define ed và 
elements. renee 


SEREN 


Fig. 3.4 Box Model™ 
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div { 
width : 300px; 
border : 15px solid green; 
padding : 50px; 
margin : 20px; 
} 
0.14. Write short notes on margin and padding in CSS. 


Ans. Margin — Amargin is the space around somethi 
total control over margins, but not only for the body, but also for any block 
elements — lists, images, paragraphs, div's, span’s, etc, we will still vest to 
set the marginwidth and marginheight to appropriate values even if we choose 
to set the margin property of the body tag. Margin values can be fixed amounts 


ing. CSS aims to give _ 


| such as px (pixels) or % (a percentage), or set to auto, 


If we want a page to have no margin, we could use — 

body { margin : Opx Opx Opx Opx; } 

If we want a page to have a 15 pixels on top, 10 on the left, and the 
tight and bottom automatically set, we could use — 

body ( margin : 15px auto auto 10px;} 

If we wanted a 1096 margin at the top and no margin on the other 
sides. 

We could use — 

body { margin : 1096 Opx Opx Opx; } 

We can also set each of the four margin values individually, with the 
Properties margin-top, margin-right, margin-bottom, and margin-left, 
"spectively, 
except it's the white space between 
hich inherits the backgrou 
the background-color 


Padding — Padding is just like a margin, 
aa rgin and the actual content. Unlike margin, w 
Spe T of Whatever is around the margin, padding uses 

“ified for whatever it is padding. 


" " We warit a paragraph to have 5px of padding a 


1l around it, we could 


P{padding : Spx Spx 5px 5px; . 
* can also use auto or a 96, just like a margin: 
-" he four individual padding properties are = 
"8-bottom, and padding-left respectively. 


gop, padding right 


104 Internet and Web Technology 


Q.15. What is the difference between cell padding and cey 


(R.GP.K., June 2010, Dec j 
Ans. Cell padding is used to specify the space between the edges 


Pacing 


Ai 
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cell and cell content in terms of pixels. You can set the cel] Padding M 
piene) uf F ae Cat sia is y K Q16. How will you position the various elements in a Web pai? 
specify the space between the bor " e cells, he edd ; 
with ds cellspacing attribute of the <table>tag. Pici, Ae wed beum t m to have greater control over the 
; o D O ways of defini " 
ingen ihe UT = | Hera pies which are as follows — ys of defining the position of 
each cell is visible, table border ell Spacin | € ey m i 
contains thercells, Cell Padi, A (i) Absolute Positioning — <img sto = "X-gif" style = “position : 
te; top : Opx; left : Opx; z-index : 1» 
Example- absolute; A : 
<html> This statement positions the img element on the page. On specifying the 
<head> position attributes as absolute removes it from the normal flow of elements on 
<title> Table </title> the page and positions the element according to its distance from top, left, right 
2. Fig. 3.5 or bottom margins of its parent ENIM 
<body> e: element. The z-index attribute is used 
<table border = "2" cell padding = “7”> to layer the overlapping elements. 
<tr> ale. i 
i : Elements having higher z-index value 
E padding </th> <th> cell spacing |. are displayed in the front of elements ME 
</tr> | with lower z-index values. 
<tr> 


<td> 20 </td> <td> 20 </td> 
<td id = “nestedone”> 
<table border = “1” 


Fig. 3.6 shows the output 
screen for the following code to 
| position the elements. 


cell spacing = “10” | = " 
cell padding = “10"> pm | <html> E LA | 
hys <head> Fig. 3.6 Absolute Positioning 
<td> : . 
i <title> Absolute positioning </title> 
<img sre = "CFPI.png" style = “display : block” alt = “Cucut 
and ia D “height = "S8" width = “gop > oc e aret 
</td> * ade ect 
<td> <img src = “c:\picturel jpg” style = position : absolute 


<img src = “CFP2, 
= "88" width e «qr PPn: 


</td> </tr> </table> 
</table> 
</body> 
</html> 


<td> </tr> 


8" style = "display : block” alt = "roses" hei) 


a "d up 20 pixels below the heading. 
| 


top : 50px; left : 25px; z-index : 1” > : 
<h2 style = “position : absolute; top : 120px; 
3” > Positioning element </h2> 
</body> 
| s i i don 
m (ii) Relative Positioning — In this, the element is d as " 
Bs natural flow in the document. For instance, ions x “top: 10 px, it will 
i ara; 
E below a heading, and you specify the parag" 


left : 130px; z-index : 


" ing implementation 
Fig. 3.7 shows the output for the code below illustrating impe 


IU ; 
ftelative Positioning. 
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ating the use of relative positioning 


Dlustr: 


The running text is here. | 


ning text in the normal flow 
NUS S 
aa, 


Fig. 3.7 Relative Positioning 


Again there isa rum subscript 


<html> 
<head> 
<title> Relative positioning </title> 
<style type = “text/css”> 
.super {position : relative; 


top : -lex) 
.sub {position : relative; bottom : 1 ex} 
</style> 
</head> 
<body> 


«hl» Illustrating the use of relative positioning </hl> 
<p> The running text is here.<span 
class = “super” > superscript</span><br> 
Again there is a running text in the normal flow <span chs 


</p> = "sub" > subscript</spa? 


</body> 
</html> 


0.17. (i) In CSS what are 
what is the default ? 


Gi) InCSSwh 
— hidden ? a 


the five possible values for "position", atl 


isthe difference between display — none and visi 


superscript j i 
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The latter Cw? eot iras ia E he element's box should move t the fi 
or far right S rrent line box, respectively Neither position ar 
ft is an inherited properly. - Neither position nor 


element with a position value oth TER 
osition value of a positioned element t. sae itioned. If 
psolutely positioned. Otherwise, it is relatively ANE Wis said tg 
:nberited) properties apply specifically to positioned e Four 
(noni Each of these i oned elements — left, right, 
and bottom. Properties takes a value that is either a le 

age, or the keyword auto (the initial value). sei 
(ii) Specifying none for the value of display tells the browser to, for 
display purposes, treat the element and all of its descendents as if they did not 
exist. In other words, the element is effectively removed from the normal 
flow and is also not displayed elsewhere. This is sometimes used with scripting 
to allow portions of a document to be easily added to or removed from the 
browser window. 

On the other hand, if the value of visibility property is hidden, then 
the element and its children, except those that specify visible for this 
property, will not be rendered. However, muchas with relative positioning, 
the space occupied by the element will remain rendered. In other words, 
whether an element is visible or not does not affect the rendering of other 
nondescendent elements. Like display, this property is generally used in 
scripting contexts. 


the P 
al 


, 
a percent 


0.18. Write short note on CSS2. 


Ans. Cascading style sheets level 2 (CSS2) is the second version of 
cascading style sheet developed by W3C. It's a declarative language used to 
enhance the HTML . CSS2 is a subset of CSS level 1 and has enhanced 
capabilities like, media types concept, aural style sheets, features for 
intermationalization, extended font selection, automatic numbering and generated 
content, cursors, dynamic outlines, capability to control overflow, clipping, 


Absolute, fixed and relative positioning. 


nt projects to a new 
3 (CSS3) is the third version of 


ity to make t entation of We 
Mettier he present 


follows — : 
allows a content slide beneath 


ce as if it’s coming out or 


Some new features include in CSS3 are 2s 

() Box Shadows — This new feature 
Area such as footer, to give an appearan 
Into the website. 


Nother 
Sinking 
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(ii) Font Additions — n CSS3, | dex we Super easy, - 
to do is just upload the file to your server, link to the CSS file ang eu M 
per your choice. à 

(iii) CSS3 Selectors — Using these selectors, choosing DOM elm 
on the basis of there attributes is extremely easy. You do not really Ne, 
specify classes and IDs for each and every element. Instead, YOu cay ty 
these field elements to perform styling functions. Ug 


(iv) Rounded Corners — The primary Motive of rounded comen; 
spruce the overall look of a website, but to utilize it, a designer nee is 
struggle hard to write a plenty of code and adjusting other Specifications "ui 
as height, width, and positioning of multiple elements. d 


| 
| 
border. | 


Withoy 


CSS3 addresses all these issues by presenting a feature called 
radius. The feature provides you all the rounded elements features 
making you write a single line of code. 


(v) Border Images — Another cool feature of CSS3 is the introducti 
of border images. The feature allows you to exchange a border with a 


: © n ; 4 n image | 
It helps you specify an image in place of a plain solid-colored borde ; 


i | 
' (vi) Opacity Levels — Earlier, designers had to either create a new 
image or make use of CSS filters. But in CSS3, you simply need to provide a 


input “opacity : 0.5” to get the desirable effects. 


(vii) Transform — The function allows 
area would become when hover, 


(viii) CSS3 Text Shadow — The function allows you to add drop| 
shadows to the text. In the previous ver: 


: : sion, the designers had to either usea 
Image or a duplicate text element and then position it | 


you to determine how biga 


st features and updates of CSS3 and HTML 
Will have now more possible ways to provide 


9Jects, and thus make them forge their own paths. 


|: n A 
AvASCRIPT p CuENT SIDE SCRIPTING WITH JAVASCRIPT 
"A NCTIONS, CONDITIONS, LOOPS AND 
ETITION, POP UP BOXES a 


2.20. What i r 
at is JavaScript ? Give some explanation on it. 


(R.GRY, June W 


` ‘vity in 
5i SER no interactivity 
Itself, the l&slinglo: Bes. To provide interactivity to HTML inside the brow 


Ans, The HTML 
Case of plain HTML Pages are static, That is, there is 


gy of n i 
Y of JavaScript was developed. JavaScript i"? 


CSS and Java Script 
* 10! 
ming. We can write small programs p 9 


ertain events or just like that. Thes 


JavaScript is an interpreted language, 
ML pases: or it can be kept ina sepa; 
m "red to in the HTML page. It is Supported b 
t explorer, Netscape Navigator, and F; 
In A sample JavaScript is shown below — 
<html> 
<body> . 
<script type = "text/javascript" 
document.write (“HelloWorld!”); 
</script> i 


</body> 
<html> 


Q.21. What is JavaScript code used in an HTML document ? Explain 
briefly the basic design rules for Web page designing.(R.GP.V., June 2012) 

Ans. JavaScript — Refer to Q.20. 

Design Rules for Web Page Designing — 

(i) Navigation — The website visitors need to be able to jump from 
page to page with ease. Make sure that all of the hyperlinks are linking out to the 
correct landing page, and that any graphics and images are linked appropriately, 

(ii) Readability — Use simple language and make sure that the text size 
isnot too small or too large. Make sure all graphics with text are easy to read. 

(iii) Search Engine Optimization — We need a website that is optimized 
for the search engines. This means that it is designed and coded ina way that will 
attract the attention of search engine Web crawlers and can get indexed easily. 

(iv) Consistency—The company logo, the color of the tex, size of pictures 
and any special text-formatting used needs to be consistent throughout the site. € 
sists to create a professional appearance and will create a better user Ve ; 

Ó) Download Speed — If itakes too long for Web pages to load, the We 
a H competitor. Overloading the site 
Or may just leave the site and go to your com the visitors and 
with too i. ia-rich files and animations can bore the visi 
Brev many graphics, media-rich files an oduct page or contact page. 
ent them from even getting to a landing page. P à 
(R.GR¥., Dec. 2015) 


Site visit 


9-22. What are the features of JavaScript n 
Ans. JavaScript has several features — ; 
ww. © Programming Tool — JavaScript is 
Ty sim 


Ple syntax. ae 
it ü i HTML Page- For instance, 
(i) Can Produce Dynamic Text into an pt cole 


ý MET 
Tipt statement document.write ( “tl 


a scripting language with a 


the J ‘ava: 
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into the HTML output <h1> Atul </h1>, if the variable name Contains g, 
Atul. . le 
(iii) Reacting to Events — JavaScript code executes when " 
happens such as when a page has finished loading, when a user i i 
HTML element. 
(iv) Reading and Writing HTML Elements — JavaScri 
and change the content of an HTML element. 


(v) Validate Data — JavaScript can be used to validate form 
before it is submitted to a server, and thus saving the server from extra Process | 
Y 


Q.23. What are objects in JavaScript. (R.GRV., June 201 5,2 


Ans. An object in JavaScript is a set of variables, functions, etç th 
encapsulates data and methods. JavaScript also provides objects that encapa | 
various attributes and methods in a script. Objects are grouped together aj 
are given names. They may have properties or variables associated witha! 
object, methods which are functions associated with an object, and ey 
which notify that a particular event has occurred. 


ony 


Pt can rel 


UC 


en | 


Q.24. What do you mean by scripting language ? (R.GBV., June 2016) 

Ans. A scripting language is a specialized programming language designe! 
to be used to automate tasks within a particular software environment, fi) 
example, in Linux we use shell scripts. These are generally small programs 
that issue Linux shell commands in order to cause the operating system ii 
perform certain functions. For instance, shell scripting is a convenient way'| 
change the file extension on all of the files within a directory. This could 


done by hand, but scripting can be used to automate what might otherwise 
a tedious process. 


Q.25. Justify the need for client side scripting languages. 


is e HTML pages are static. HTML documents have limited interact? 
Wit) the users through HTML forms, Scripting languages like JavaScript enabls 


Web authors to write small Scripts that execute on the users browsers P 


th 
add ix qu rne example, an application that collects data from af 


a fa puts it to the server can validate the data for completeness ^. 
Ctness, before sending to server, Another important use is that Jav" 


e m ed functionality for Web browsers in the form of Java a 
> an ML elem ; et 
and then set a parameter or JA web page might use an HTML o £ 


à itis? 
- for Java a i Usually, # 
script that carries this out. Poit based on e 
JavaScri : 
which d Lg a complete set of built-in functions and com hi 
perform mathematica] calculations, manipulate string®: 


0.26. What are the various merits of JavaScrip "T 


Ans. The following are the merits of JavaScript = 
(i) Less Server Interaction You can, 
page off to the server. This saves server tra 


e vir ii Feedback to the Visitors — The user does not have 
ait for a page reload to * if they have forgotten to enter something. 

(iii) Automated Fixing of. Minor Errors — For example, if we have 
a database system that expects a date in the format dd-mm-yyyy and the 
visitor enters it in the form dd/mmy/yyyy, a good JavaScript can change this 
minor mistake prior to sending the form to the server. If that was the only 
mistake the visitor made, we can save her an error message. Thus, making it 
less frustrating to use the site. 

(iv) Increased Usability by Allowing Visitors to Change and Interact 
with the user Interface without Reloading the Page — An example of this 
would be select boxes that allow immediate filtering, such as only showing the 
available destinations for a certain airport, without making you reload the page 
and wait for the result. 

(v) Increased Interactivity — You can create interfaces that react 
when the user hovers over them with a mouse or activates them through the 
keyboard. This is partly possible with CSS and HTML as well, but JavaScript 
offers you a lot wider range of options. : 

(vi) Richer Interfaces — You can use JavaScript to include items, 
Such as drag-and-drop components and sliders. 

(vii) Lightweight Environment — Instead of pale ag É m 
file like a Java applet or a Flash movie, scripts are = sa wer 
cached once they are loaded. JavaScript also uses ps Fn aset, 

nctionality rather than its own user interfaces, like Flas Pkw 
is makes it easier for users, as they already know ieee ee 
Use them, 


Validate the user input before sending 


" ffic, which means saving money. 


to Wi 


; GEV., Dec. 2010) 
2.27. List out the weaknesses of Javascript — pd 
Ans, Following are some of the vet i e applications. It is 
G) JavaScript is not used to create stand-alone 
"ly used to add some functionality in any 


Web page. 
Gi) JavaScript cannot read and write 


files into the client 
Web site. 
"ean only be used as a utility language '? develop 20y 


t machines. 


'echnology 
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n e like the JavaScr pt 1s the 
(iii) he interpreted languag! sii d 
(i ) se printers or other devices on the users System Or th 
IV, 


side LAN. " 
i t multiprocessin ; 
(v) lavaScriptdoes not implement multip Eormultit, 


as : : In 
«teat acl ; t 
(vi) JavaScript has limitations of writing n client machine, 
pt cannot be used to send email to the visitors ory 
ij 


e lig 


(vii) JavaScri| 
of the Web site. 
T ing JavaScript you cannot connect the Web sitet 
(viii) By using 2 "i T 
database. For this you need to use server-side scripting, | 


(ix) Not all browsers support the JavaScript codes, The bro, 
may support JavaScript as a whole, but may not support the codes or 


: lines q 
codes written in JavaScript and may interpret differently. 


Q.28. Explain how to call JavaScript from an HTML page. 
Or 


How do you get JavaScript onto a Web page ? Explain with example, 

(R.GP.F,, June 201 | 

Ans. We can control when JavaScript code should execute. By defa, 

scripts in a page will be executed immediately when the page loads into th 

browser. This is not always the case. Sometimes we want to execute a scrip 
when a page loads, and at other times when a user triggers an event. 


Scripts that are to be executed only when they are called, or whena 


event is triggered, go in the head section. When we place a script in thehedl 


section, we ensure that the script is loaded before anyone uses it. This mean 


that it does not execute on its own. However, if we place scripts in bol 
Section, then they automatically get executed when the page loads in the browst 


Fig. 3.8 shows this difference, 


=e | Executes only when explicitly call 
Writing a Script in the body section "me | Executes automatically on its GE | 


Fig. 3.8 Where to Place JavaScript 


4 ! "m 

Te vds 85 many scripts as required in an HTML page. Also ye 

many of th OW many of them should be in the <head> section, a” 

l em should be in the <body> section 

Fig. 3.9 shows the code for writi 
Versus in the <body> Section 


Writing 


4 script in the head section 


joh 
A cll 
ing a script inside the <head> $ 
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<html> 


<head> 


function message( ) ( </head> 


alert ("Called from the 
<body> section") <body> 
<script type=“text/j javascript”> 
window.document.write 
(Directly executed”) 
</script> 
</body> 
Shtmb - 


</script> 
</head> 


<body onload = “message( )”> 
</body> 
</html> 


(a) Script in the <head> section (b) Script in the <body> section 


Fig. 3.9 Writing Scripts in <head> and <body> Sections 

In the figure, the difference is where we have put the script. In case (a), 
the script is inside the <head> section, and therefore, must explicitly get called 
toget executed. We call the script from the onload event of the <body> section. 
That is, we tell the browser that as soon as it starts loading the HTML page, it 
should call the message( ) function written in the <head> section. In case (b), 
the script is a part of the <body> section itself, and therefore, would get 
executed as soon as the HTML page gets loaded in the browser. 


Q.29. Explain the use of JavaScript in Web technology. Define various 
types of JavaScripts. (R.GBF., Dec. 2010) 
Ans. The following are the uses of JavaScript — 
(i) JavaScript is simpler, so anyone can put the small snippets of 
the code into their HTML pages. 
Gi) JavaScript enables writing of dynamic text into HTML page. 
able text can also be written in HTML page. 
(ii) J avaScript enables you to read and change the content of HTML 


The vari; 


Controls, 


(iv) Certain validations to be performed on the RA i ted 
Not leaving any text field blank, match of the password and e i ie 
“t password fields, etc. can be checked at client-side by using Javascrip 
Y Scripting lan ; 
sd 3 ji be used to 

(v) JavaScript is also helpful in creating mea dedi: 
Te or relative relevant information on the clien crier M 
(vi) JavaScript also enables you to load a specttic pass 
Client’s request. 
iNelug (vii) JavaScript is used to write fi 

“d from HTML pages and interact Wi 


Sither sto; 


Upon the 


functions that are embedded in or 
th the DOM of the page. 
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ipt i in changing the i 
(viii) JavaScript 1s also helpful in changing image as the " 
cursor moves over them. 
(ix) JavaScript is also he 


to the client or user's action. 


Ipful in calling the new Web page, accor 
ng 


Types of JavaScripts — Refer to Q.28. 

0.30. Discuss the scope of variables in JavaScript. (R. GP. V., Dec, m 

Ans. There is no limit on the length of the name ofa variable in 
Script. However, there are rules that define the scope of variables, These 
must be kept in mind while naming variables — 


Java. 


Tks 


(i) The name of the variable must be unique in the script, 
(ii) The name of the variable can only contain letters, Tumbes 
and underscores. It cannot contain spaces and certain punctuatig 
characters. 
(iii) The name of the variable cannot be enclosed by single or dou 
quotations. 


(iv) The name of the variable must begin with an uppercase «| 


lowercase letter or an underscore. It cannot begin with a number. 


(v) The name of the variable cannot be same as any keyword i 


JavaScript. 


0.31. Explain variables using an example. 


Ans. JavaScript permits us to define and use variables similar to olt 
programming languages. Variables are declared using the keyword wi. 


However, this keyword is optional. Therefore, the following two declaratio 
are equivalent— 


var name = "test"; 


name — "test"; 
Variables can be local or global. 


() Local Variables — When a variable is declared within bet 


the variable can only be accessed inside that function. When we exit the E 
the variable is destroyed. 

n f 

functi (ii) Global Variables — When a variable is declared ° eil 

ion, all the functions on our HTML page can access it. The life i 


global variab D 
closed. Tables starts when they are declared, and ends when theg 


? : CSSa x 
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<html> 
<head> 
<title> Seconds in a day </title> 
<script type = “textjavascript’> 
var seconds per minute = 60. 
var minutes per hour = 60. , 
var hours_per_day = 24; à 
varseconds per day- seconds $ Dét rhinue minutes per hour 
</script> * hours_per_day; 
</head> 
<body> 
<h1> we can see that...</h1> 
<script type = “text/javascript”> 
window.document.write(“there are”); 
window.document.write(seconds_per_day); 
window.document.write("seconds in a day.”); 
</script> 
</body> 
</html> 


0.32. Discuss the data types in JavaScript. 
Or 

Define data types in JavaScript. (R.GP.V,, June 2015) 

Ans. In some computer languages, we have to specify the type of data a 
Variable will store. For example, a number or a string. In JavaScript we do not 
need to specify a data type in most cases. However, we should know the 
Ypes of data JavaScript can deal with. 

These are the basic JavaScript data types — 

© Numbers, such as 4, 50 or 3.2789. Java 

and floating-point numbers. 
(ii) Boolean, or logical values - These can have one oiam 
Se. These are useful for indicating whether 4 nid red or more 
(iii) Strings, such as “this is a book". These consist o 
S of text. 


Script supports both 
tegers 


ttue or fa 


Character, 


© of an ung iable. For example, the $. i has not 
(lig) will resak efine vanna error message) if the variable fig has 
bee, esult in this value (and an 
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33. Explain function. What are the different methods o 
Q.33. Exp 


(R-GPy,, Ju 
function ? 


Or 


What do you mean by functions in JavaScript (RGR, June 2015 


‘Ans. A function is a sort of mini-program ioc part of a lar 

i It consists of one or more statements. thasa unique Name 

a ean be called from elsewhere in the program. Functions ATE uei 

wee ie same operation has to be performed ei mae within a Program, 

Functions allow to have parameters or argumen san seniri a value to the 

statement that invoked the function. Functions are created in JavaScript 
follows — 

function name ( ) 


^80 


( 
statement | ; 
statement 2 ; 
statement n; 
j 


All the statements except the last statement must be followed ly 
semicolons. But even if there is a semicolon after the last statement, it woul 
not cause any problems. 


Functions can be called from within other functions. For example - 
function goodnight ( ) 
{ 


} 


function goodmorning ( ) 


alert (“Goodnight!”) 


alert (“Goodmorning!”) 
goodnight () 


the function goodmornin, 
en. An alert is a box contai; 
user can press to make the box di 
the box will Contain the word 
then calls the fui 
“Goodnight!”, 


ác Sd £ () is called, it first displays an pt 
ning some text and an ‘OK’ button pet 
sappear when the text has been read. (i 
"Goodmorning!", The goodmorning () fu" i 


E in 
nction goodnight ( ), which posts another alert 59! 


5 dat 
teni. diera declared in the function are called local variables MT 
Yin the function where they are defined. Functions contain ^ 


f Calling, | 
ine 201) 


they accept parameters, do some 


le, 
roce <html> 
<head> 
<title> An example of function in JavaScript </title> 
</head> 
<body> 


<script language = "javascript 
function sum (x, y) 
( 
var p; 
p-xty 
return p; 
} 
document.write/n(sum (4, 2)); 
</body> 
</html> 


Q.34. Discuss about JavaScript top-level properties and functions. 


(R.GPV, June 2014) 
Ans. Refer to Q.22 and Q.33. 


Q.35. Discuss conditional expression ternary operator in JavaScript. 
Ans. J avaScript conditional expression operator is ? and : The conditional 
“pression operator is a ternary operator since it takes three operands, a 
condition to be evaluated and two alternative values to be returned based on 
€ truth E: falsity of the condition. 
ondition ? : » 
$ condition expressed beni ae a value true or false. If the condition 


> 1 f 
: ©, Value 1 is the result of the expression, otherwise value 2 is the result o 
expression, 


i Give example of 
ang Explain all conditional statements with EGR V, June 2011) 


Ans, Jay; pt if, if-el: 

a Scri i conditional statements, 1f, il-else, 
a re les three types of 

d Switc] à 1pt provides t typ 


ic and 
. Usi : . is one of the most basic an 
simpy Ing the if Statement — The if statement statement when you want 


to control flow statement, You can use the i articular 
coy ecute a ies script statements only when a p 
“dition is 2 of one or more 
et. 
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The syntax for the if statement is — 
if (condition) 


statement! 
} 

In the preceding syntax, if the condition evaluates to true, then the go 
statement, represented by statement, enclosed within the curly pr," 
executed. If the condition evaluates to false, the statement enclose, 
curly braces are skipped and the statement immediately after the ¢ 
brace( ) is executed. 

An example of the if statement is given below — 

<html> 

<body> . 
<script type = “text/javascript” > 
var d = new Date( ); 
var time = d.getHours( ); 
if(time > 12) ( 
document.write (“<b> It is afternoon </b>”); 
} 


</script> 
</body> 
</html> 


AES 
d Within ; 
losing qu 


Using the if-else Statement — The if statement allows us to execut: 
set of statements only when a particular condition is true. However, if w 
want to execute another set of statements when the condition is false, thenw 
use the if-else statement. 
The syntax for the if-else statement is — 
if (condition) 
{ 
Statement] 


} 


else 
( 


Statement2 


} 


f 
In th i : up! 
stator © Preceding syntax, if the condition is true, then the £" a 


i tiia. d m by statement], enclosed within the first ar 7 
ed. If t ition ; E S 
© condition is false, then execution of statement! ! ll 


and 
os 38 passed on to the else clause. The group of statements repr 
ement2, of the else Clause is then executed. 


" example of the if-else statement is given be 
Sale 
4n <body> | 
«script type = "text javascript», 
var d = new Date( ); 
var time — d.getHours( y 
if(time>12){ : 
document.write(4]t is aftern 
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i oon!”); 
else { 
; document.write (“Have a nice day!”); 
</script> 
</body> 


</html> 

Using the switch Statement — The switch 
alternative to the nested if-else statement. We can us 
select a particular group of statements to be execu! 
groups of statements. The group of statements that is 
on the basis of a numeric or string expression. 


The syntax of the switch statement is — 
switch (expression) 
{ 
case valuel : 
statement] 
break; 
case value2 : 
statement2 
break; 
case value3: 
Statement3 
break; 
default : 
statement default 


} 


tie the preceding syntax, the exp 

in parentheses in the switch keyword. 
Of the case values specified in the C25 
byg "alches with the value of the expression, 


With Fespective case statement is execute 


ression that is to 


© value of the expression, then the 


This expressio 
e statements. 
the group of 
d. If none ofthe 
the default statement 


Statement provides an 
€ the switch statement to 
ted among several other 
to be executed is selected 


be evaluated is specified 
n is checked against 

If any of the case 
statements specified 
case values matches 
is executed. 
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An example of the switch statement is given below — 


<html> 
<body> 
<script type = “text/javascript”> 
var d = new Date( ); 
theDay = d.getDay( ); 
switch (theDay) { 
case 5: 
document.write(“Finally Friday”); 
break; 
case 6: 
case 0: , 
document.write(*Weekend"); 
break; 
default: 


document.write(“look forward to this weekend!"; | 


} 
</script> 
</body> 
</html> 


We can also use the ? : conditional operator in JavaScript. For exami, 
we can write the statement 


greeting = (sex = = “Male”) ? “Sir? : “Madam”; 


Q.37. Explain conditional Statements and various type of loops uselt 
JavaScript. R.GBV, Dec. 2h 


Ans. Conditional Statements — Refer to Q.36. 


é ; ie 
Types of Loops — JavaScript has three types of loops, for, whilé al 


do-while. The Sor loo 
decrementing the loop 
to be tested, and if it i 
loop first executes the 


That is, it executes the 
false. 


P executes in iteration usually incrementi 
index. The while loop first checks for the we j 
5 true, only when executes the code. The 4^ id 


code at least once whether the condition iS 


E tes 
code and then checks for the condition to bs c 
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An example of the for loop is given below — bis 


<html> 
<body> 
<script type = "text/javascri 
for (j=0; j <= jo: Fi 
document.write(“Element” +); 
i document write(“<br>”); * 
</script> 
<p> <p> 
<b> That is an example of the <> " 
</body> 4 P the <i> for </i> loop </b> 
</html> 
An example of the while loop is given below — 
<html> 
<body> 
<script type = “text/javascript”> 
var j=0; 
while(j <= 10) { 
document.write(“Element” + j); 
document.write(“<br>”); 
jH; 
} 
</script> 
<p> <p> 
<b> That is an example of the <i> while </i> loop </b> 
</body> 
</html> 
An example of the do-while loop is given below — 
<html> 
<body> e 
<script type = “text/javascript”> 
varj = 0; 
do { nats 
document.write(“Element” + i); 
document.write(“<br>”); 
ins 
} 
while(j<=10); 
</script> 
<p> <p> 
<b> That is an example 
*/ body> 
S/htmr- 


of the <i> do-while </i> loop </b> 
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38. Explain while, do-while repetition statement with — 

9.38. í ! 

" i tition statements are also kn own ea} 

while, do-while repe = 

_ while loop is to execute a statement or code block ree 

purpo: 1 
long as an expressi M | 

The do-while repetition statement is similar to the While Viii 

is first executes the code and then checks for the condition to be E: à 

" it executes the code at least once whether the condition is true Pa : 


ple of while repetition statement is given below — 


ion is true. 


An exam| 
<html> 
<body> : 
«script type-"text/javascript 
EM 
var count = 0; 
document.write("Starting Loop"); 
while (count « 10) ( 
document.write(“Current Count : " + count + “<br”; 
count++; 
} 
document.write (“Loop stopped !”); 
ll--> 
</script> 
</body> 
</html> 
Output 
Starting Loop 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Loop stopped | 


vo 0 20 € RR (0 l-—c 


CSS and Java Script 123 
: example of the do-while repetition Statement 


z Aa is given below — 
tm. 
D <body> 
<script type-"text/javascript- 
<!-- 
var count = 0; 
oC a Loop” + “<br >) 
do , 
document.write(“Current Count : ” + count + “<br />”); 
count ++; : 
} 
while (count < 5); 
document.write (“Loop stopped my 
/[-- 
</script> 
</body> 
</html> 
Output — 


Starting Loop 

Current Count : 
Current Count : 
Current Count : 
Current Count : 
Current Count : 
Loop Stopped ! 


0.39. Write a JavaScript program to generate the table of number 10 
using for repetition statement. 

Ans, 

<HTML> 

<HEAD> 

<TITLE> Table of 10 </title> 


</HEAD> 

<BODY> 

SCRIPT language = “JavaScript” type 
document.write (“<H2> Table of num 
for (i= 1; i< = 10; i+ +) 


hWNRO 


= “text/JavaScript”> 
ber 10 </H2”>); 


document.write (10*i); " 
document.write (“<BR>”); 


} 
</SCRIPT> 
</BODY> 
</HTML> 
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Mozilla Firefox 3.1 Beta T 


fnumberlü — 
> i E File:\fffffcut\ 


eot 


Im IG] Search. : 


Ò | Table of number 10 


Table of number 10 


10 
20 
30 
40 
50 
60 
70 
80 
90 
100 


Fig. 3.10 


Q.40. Write a JavaScript program to generate first 10 fibonacci numb 
using while repetition statement. 


Ans. 

<HTML> 

<HEAD> 

<TITLE>Fibonacci Series</TITLE> 

</HEAD> 

<BODY> 

<SCRIPT LANGUAGE-"JavaScript" TYPE=“text/JavaScript”> 
// Program to print the Fibonacci series upto 10 numbers 
document.write (“Fibonacci Series ... <BR: ” fontsize (4)); 
//.fontsize to increase the font size of the string 


i70; 

document.write G+" "y 
JF; 

document.writeln G+”); 
var x = 3; : 


pus (x <= 10) 


mper 
document.write(t pe m 
i=j; , 
j-t 
xb 

} 
</SCRIPT> 
</BODY> 
</HTML> 
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ut — 
outp Fibonacci Series ...__ 


0112358132134 


Q41. Explain the following rela 
(i) Confirm method of win, 
(ii) The new operator, 


ted to JavaScript E. 
dow object 


(R.GRK, June 2010) 
The confirm( ) method 
Ted by the user, an ‘OK? 


rue or false. For example 
ete file?") 


Ans. © Confirm Method of Window Object — 
displays à *confirm dialog box, containi 
button, and a ‘Cancel’ button. The method returns ti 

var response = confirm("surely want to del 
alert(response); 
will display a dialog box containing the message “ 
along with an ‘OK? button and a ‘Cancel’ button, 
the variable response will contain the Boolean value true, and this will appear in 
the ‘alert’ dialog-box. If the user clicks on ‘Cancel’ the variable response will 
contain the Boolean value false and this will appear in the ‘alert’ dialog-box. 
(ii) The New Operator — The new operator is used to create an 
instance of an object. To create an object, the new operator is followed by 
the constructor method. In the following example, the constructor methods 
are Object(), Array(),and Date( ). These constructors are built-in JavaScript 
functions. A reference to the object is returned and assigned to a variable. 
var car = new Object( ); 
var friends = new Array ("Tom", "Dick", "Harry"); 
var now = new Date ("July 4, 2003"); 


Q.42. What are the various operators in JavaScript ? à 
Ans. Operators enable us to perform an action on a variable. The basic 
JavaScript Operators are assignment, arithmetic, comparison, logical zu 
'ncrement/decrement operators. ] 
4 (Q) desienment Operators — The assignment operator is used to 
*ssign a value to a variable as shown i - 1 
var myFavouriteColor = “Red”; m. : 
(ii) Arithmetic Operators — The arithmetic Op j: 
n (-)}, multiplication (*), division(/), and modulus (76). 
var x = 5; 
var y = 20; 
varz=xty; 
//z-25 
x = “My”; 
= “name”; 
Z=xty; 
// z = “My name” 


Surely want to delete file?" 
If the user clicks on ‘OK? 


Sübtractio, 
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iii) Comparison Operators — Comparison operators ie 

de ression and return a Boolean value (true or false) en 
ex ; ; 
evaluate an XP is true or false. The various operators are > Cali 


whether the comparison 15 = = 5, then tl i m 
For example, if a =3 and b= a ten he expression’a > p is fay 


: . tors — Logical operators are used 
(iv) Logical Operate M. for 
complex comparisons. The logical operators include &&(AND), | ON 
! (NOT). These operators also return a boolean value. The AND R ite 


p tator 
returns true only i 


zæ le. 


fall the operands are true. The OR operator returns 
any ofthe operand is true. The NOT operator always returns the value Oppo 


to that of the operand. 
(v) Increment and Decrement Operators — The increment s 


decrement operators provide a shortcut for adding or subtracting 1 fion, 
value, as shown below — 
var a = 2; 
att; //a=3 
. var b = 50; 
b--;//b=49 
Increment or decrement operators can appear before a variable (prefi) 
or after a variable (postfix). If a variable with a prefix operator is used ina 
expression, the value of the variable is incremented or decremented before the 
expression is evaluated. If a postfix operator is used, the value is incrementi 
or decremented after the expression is evaluated. 
0.43. Explain array and types of array in Web technologies with the 
help of example. (R.GBK,, June 201) 


Or 


What is an array ? Discuss numeric and string arrays. j 


(R.GRY,, Dec. 1 


Ans. Array — An array is a numbered group of data items that you! 
treat as a single unit. For example, you may use an array called scores 0 
FO de rd for a game. Arrays can contain numbers, de 

jects, or other types of data, Each i h i elem! 
. Ea d an 
of the array. ch item is an array is calle! 
ariablts 
Je creat 


Numeric Array — Unlike 
need to declare an array before 
array with four elements — 


most other types of JavaScript V: 
you use it. The following examp 


Scores — new Array (5); 
_To assign a value to 
begin with 0, so the eleme 


nde 
"i 


the array, you use an index in brackets: 
nts of the array in this example would ber 


i CSS and Java Scri 
. These statements assign values to the fo cript 127 


4 u 
a scores 5 = a r elements of the array — 
scores [1] 7 755 


fy values for element 
time. This statement creates the same scores array in a single c the same 


scores — new Array (10, 20, 30, 40, 50); 
You can read the contents of an array using the same notation you used 
when assigning values. For example, the following statements would display 
the values of the first three elements of the scores array — 


-. » 
scoredisp= “Scores:” + scores [0] +“, + scores [1] + “,” + scores [2]; 
document.write(scoredisp); 


String Array — JavaScript allows us to use string arrays, or arrays of 
strings. This is a powerful feature that enables you to work with a large number 
of strings at the same time. 

You declare a string array in the same way as a numeric array. 

names = new Array (40); 

You can then assign string values to the array elements — 

names[0] = “Lee K.Tillman”; 
names[1] = “Peter England”; 

As with numeric arrays, you can also specify a string array’s contents 
when you create it. Either of the following statements would create the same 
string array as the preceding example — 

names = new Array(“Lee K.Tillman”, “Peter England”); 
names = [“Lee K. Tillman”, “Peter England”); . 

You can use string array elements anywhere you would use a te ewe 
example, the following statement prints the first three characters of the 
clement of the names array, resulting in Lee — " 

0, 3); 


document.write(name[0]. substring( June 2014) 
0.44. Discuss JavaScript array objects in details. (R.GP.V. au 
together and given a 


Ans. An array is a set of variables tater e jd usually the order 

i le name. Items are held in an array in a p! qeu t ie main advantages 

1 Which they were added to the array. However, md ways. For example, 
‘trays is that the ordering can be changed in va 


i habetical 
e s are arranged in alp! à 
ord i easily be stored so that the elements that an array contains. 


St The len, h is the num! A ame of the 
e indivi ehh pea array are accessed by using the n 


Sing 


b Technology 
alue of the array element enclosed in 


ew array object must be declared, This Su 
aN be 
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array followed by the index V: 


brackets. To create an array, à E a 
ne in the following Wo WAYS, “John”, “Willy”, « 
done var myArray = new Array (“Kate”, “John”, “Willy”, “Bob”) 
Or 
ew Array [“Kate”, “John”, “Willy”, «Bop». 
the new Array object is declared explicitly, h 
s declared in much the same way a string might 
declared, except that square brackets are used at the beginning and end inia 
of quote-marks. The square brackets indicate to the JavaScript interpre 
that this sequence of characters is being declared as an array. tr 
Q.45. What are the types of popup boxes in JavaScript ? 
Ans. There are three types of popup boxes in JavaScript — 
(à Alert box (ii) Confirm box (iii) Prompt box 
(i) Alert Box — The Alert( ) function to display information in; 
massage box. Alert( ) method of window object creates a small dialog bx 
with a short text message and “OK” command button called alert box. Alei 
box contains an icon indicating a warning. 
For example — 
<html> 
<head> 
<title> JavaScript Example </title> 
</head> 
<body bgcolor = “red”> 
<script type = “text/JavaScript” language = "JavaScript 
alert (“Hello This is alert function”); 


//also declare window.alert (“Hello This is alert function"); Jl 
</script> 


</body> 
</html> 
Output — 


5 


var myArray = n 
In the first example, t 
second example, the array ! 


[JavaScript Exa mple] 
DAN 
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An alert box is used if we want to display som 


alert box appears, the user needs to ais 


ify an 
V noel buttons. 


For example — 
<html> 
<head> 
<title> JavaScript Example </title> 
</head> 
<body bgcolor = “red” > 
<script type = "text/JavaScript" lan =“ ayy 
Confirm (“Hello This Wise mare 
//Window.confirm (“Hello This is confirm”); // 
</script> 


Fig, 3.12 
tie [ "gm box returns a boolean value. If the user clicks on “OK”, it returns 
- If the user clicks on “Cancel”, it returns false. 
We c (i iti) Prompt Box — Prompt box allows getting input from the user. 
by the specify the default text for the text field. The information submitted 
€ user from prompt( ) can be stored in a variable. 
For example — 
<html> 
<head> 
<title> JavaScript Example <htitle> 
d M sis 
body bgcolor = “red” > 5 m. 
tbt type = "text/JavaScript" language = “JavaScript ial here”); 
n = prompt (“Enter your number :” ‘Type your number d 
</script> l 
</body> 
</html> 
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on 

eS 
umber 


Type your: number here Em 


exces. 
` Fig. 3.13 
A prompt box returns input string value when the user clicks “Ok” 


user clicks “Cancel”, it returns null value. 
Q.46. Write a program to check whether a number input through Prony 


box and alert box is zero, odd or even. 


Ans. 
<html> 
<head> " 
«title» Example of Prompt and alert box </title> 
</head> 
<body> , 
<script type = "text/JavaScript 
var n=prompt (“Enter your number:" “Type your number here”); 
n = parselnt (n); $ 
if (n == 0) 
alert (“The number is zero"); 
else if (n % 2) 
alert (“The number is odd"); 
else 
alert (“The number is even"); 
</script> 


[JavaScript Example] 


Bu 


Fig. 3.14 
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Tam to compute th 
e day 
Prompt dialog box. i 


„47. Write a JavaScript prog 


while you input the date with in "— 


Ans. 
<html> 
<head> 
<title> Day of week «/title»- 
«script type-"'text/JavaScript- 
//Enter date of birth to know the da ol 
var d=new Date (prompt (“Enter E t. ae n day. 
(e.g. May 17, 2002)", “Month DD, YYYY) 
dy-d.getDay( ) 
switch (dy) 
( 
case 0: 
document.write (“Tt was «b»Sunday«/b» on that day”) 
break 
case 1 : 
document.write (“It was <b>Monday</b> on that day.”) 
break 
case 2 : 
document.write (“It was <b>Tuesday</b> on that day.") 
break 
case 3: 
document.write (“It was <b>Wednesday</b> on that day.”) 
break 
case 4: 
document.write (“It was <b>Thursday</b> on that day.”) 
break 
case 5: . 
document.write (“It was <b>Friday</o> on that day") 
break 
Case 6 : 
document. write ( 
break 
default : R bu 
document.write (“Please input a valid Date in ? 
ose format !!!") 
</script> 
</body> 
</html> Get 


“Tt was <b> Saturday </b> on that day.”) 


Technology 
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0.48. Discuss the standard objects in JavaScript. (R.GP.V., Dec. 2015) 
Ans. JavaScript provides several standard objects, such as Array, Boolen, 
Date, Math, String etc. . 
The following script shows the example of the Date object — 
<html> 
<body> 
<script type = “text/javascript” > 
var d = new Date( ); 
document.write(d.getDate( )» 
document. write(“.”); 
document.write(d.getMonth( ) + 1); 
document.write(“.”); $ 
document.write(d.getFullYear( 2: 
</script> 
</body> 
</html> 


ing ths 
_ In this Code, we create a new instance of the Date object. Use : 
object, we obtain the day number, the month nümber, and the fout-die! ^. 


all concatenated with each i The output 
hoat -each other by using a dot Q symbol. 


19.07.2007 o 


A We can also manipulate val 

Praed, current date and tim 
i : 

© of our choice, and then display the full date and time again. 


we 
lues of the Date object. For examp l, eW 


€ in the full form, change the year " 


D] 
pisis d” 
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<script type = “text/javascrip> 
var d = new Date( ); 
document.write (d); 
document. write(“<br/>»); 
d.setFullYear(“2100); 
document.write(d); 
</script> 
</body> 
</html> 
The output is as given below — 
Thu Jul 19 15 :31 : 54 UTC + 0530 2007 
Mon Jul 19 15 :31 : 54 UTC + 05302100 


Table 3.2 shows the useful date functions, 
Table 3.2 Date Functions 


Method Description 
Date( ) Returns a Date object 
getDate( ) Returns the date of a Date object (from 1-31) 
getDay( ) Returns the day of a Date object (from 0-6, where 0 = 
Sunday, 1 = Monday etc.) 
setMonth( ) | Returns the month of a Date object (from 0-11, where 0 = 
January, 1 = February etc.) 
&etFullYear( ) Returns the year of a Date object (four digits) 
&tYear( ) Returns the year of a Date object (from 0-99). 
&tHours( ) Returns the hour of a Date object (from 0-23) 
F'Minutes( ) | Returns the minute of a Date object (from 0-59) 


“Seconds( ) | Returns the second of a Date object (from 0-59) 


The followin; 
<html> 
<body> 


<script type = “text/javascript”? 
document.write (Math.round(8.80)) 
</ Script> 


</body> 
Shims y 


g script shows the example of the Math object. 


ie : 
Output is as given below — 


T 3 b ID 
! e 3.3 lists the important methods of the Math object. 


nd Web Technology 
Table 3.3 Math Functions 


Description 
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Returns the absolute value ofx 


i fx 
Returns the cosine o ; 
Returns the value of E raised to the power of x 


Returns the natural log of x i 

Returns the number with the highest value of x and 
Returns the number with the lowest value of x and y 
Returns the value of the number x raised to the power 
Returns a random number between 0 and 1 

Rounds x to the nearest integer 

Returns the sine of x 

Returns the square root ofx 

Returns the tangent of x 


ofy 


JavaScript provides some string handling functions. These are giva 


below — 
(i) indexOf() — Yt gets location of a specified set of charactes 


(i.e., of a sub-string). Starts counting at 0, and returns starting position 
found, otherwise returns -1. 
(ii) lastIndexOf( ) — It is similar to index of ( ), except it looks fx 
the last occurrence of the substring. 
(iii) CharAt( ) — It returns a single character inside a string il! 
specific position. 
(iv) subString( ) — It returns a substring inside a string at a speci 
position. 
(V). split() — 1t divides a string into substrings, based on a delimit 


0.49. What do you mean by date object in JavaScript ? 


(R.GBV., De mid 


Ans. Refer to Q.48. 


j T 
" 0.50. Objects are created at run-time in Java. Describe what at f 
anc 0 (R.GPV, Junt Ld 


Ans. i Per: À tbs? C £ 
s. Creating an object is called as instantiating ari object. The new Kr 


is us SUM 
ed to create objects in Java. The new operator creates an 0% ri 


specified class and retu : 
5 d rns a referenc ject. Here is 9^ 
creating an object of type Box. eee 


9.51. What do you mean by string object in JavaScript ? 
ipt ? 


(R.GPV, Dec. 2016) 
tring object has a number 
ty of manipulations on a 
contains certain patterns 
and many more. A string 


Ans. Every string in JavaScript is an object, The s 
of properties, methods, which helps perform a varie 
given string, for example, searching a string to see ifi 
of letters, extracting parts of it to form new string, 
object is created in the following way - , 

var myString = newString (“Test”); 

The string object can also be declared as — 

var myString = “Test”; 

The above statement can automatically create a string object. The object 
is associated with methods, properties, etc. The string object includes length 
as its property. It can be used to find the length of the sequence of characters 
entered in a text box or text area. Some of the methods available for string 
manipulation are as follows. 

Table 3.4 


Surrounds the string with the HTML big tag 


big( ) 


blink() Surrounds the string with the HTML blink tag 
bold( ) Surrounds the string with the HTML bold tag 
charact( ) Given an index as an argument, returns the character 
itali at the specified index. Kh 

lios( ) Surrounds the string with the HTML <P tag 


folowercase( ) 
fouppercase( ) 
Substring( ) 


Makes the entire string lowercase 


Makes the entire string uppercase — . 
Given two index, returns the substring starting at the fir. 


index and ending with the character before the last index. 


(R.GBV,, June 2016) 


0.52, Define DOM. 


0i 


r 
1 
What is DOM and how does it relate t0 XML? (R.GBV, June 2017) 


dependent convention for 
and XML documents. 


i 
//declare reference W. 
: /lallocate a Box object 


Box mybox; 
mybox = new Box ( ); 


a DOM is a platform and languag? in 
In Dg ing and interacting with objects in HTM! poems 
Ordin; object are also called Elements, wich nae 
ing to the syntax and rules of the programming 


fied and addressed 


ge. DOM presents 
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the tree-structure having the root node às 
an XML es attributes, and text defined as the child nodeg © Pate 
» n . n 5 
aene the nodes have a hierarchical relationship with each othe, 9 
ee , i 


Q.53. How can you target an element in your HTML using t 


the p 
(R.GP.V, June wi 
Or UI 


1 ? Explain. 


What is document object mode (R.GRY, June mn 


Ans. The JavaScript language itself contains no facilities for intera 
with a browser or with the document contained in the browser. Instead, 
facilities are provided by the browser in the form of host Objects that " 
stored as properties of the JavaScript global object, which is named Windy, 
in IE6 and Mozilla 1.4. The definition of the properties of this object, many 
which are themselves objects with their own properties, is known as the 
Document Object Model (DOM). 


Consider, for example, how the familiar rollover effect (an image Changes 
when you place the mouse over it, and changes back when the mouse mows 
away from the image) can be produced using the DOM. Fig. 3.16 showsa 
HTML document with an img element that includes two attributes, onmouseover 
and onmouseout, whose values are JavaScript function calls. These at 
examples of intrinsic event attributes. 

<!DOCTYPE html 


PUBLIC *-//W3C//DTD XHTML 1.0 Strict//EN” 


"http//www.w3.org/TR/xhtml1/DTD/xhtmll -strict.dtd"» 
<html> 
<head> 
<title>Rollover,html</title> 
<script type="text/javascript” sre= “rollover.js”> 
</script> 


<meta http-equiv=“Content-Script-Type” content=“text/javascrip 

</head> i 

<body> 
<p> 

<img id=“img1” src-"CFP2.png? alt=“flower pot” 
height=“86” width-«44» 
onmouseover=“show(‘img1’, ‘CFP22.png’);” 
onmouseout=“show(‘imgl’, ‘CFP2.png’);” /> 


"p 


«p 
</body> 
</html> 
B 3.16 HTML Document with Calls to JavaScript Functio" 
when the me nStover attribute specifies JavaScript code that will be Bd 
cursor is placed over the img element, and the iw al 


attribute i 
"Ig. the code in both cases is a call to a function named sho 


Css and J; n 

" ava 
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function show(eltId, URL) ( 
var elt = window.document.getgy, 
elt.setAttribute("src", URL); mentByld(eltIa); 


return; 


Fig. 3.17 JavaScript Function Accessing the DOM 
HTML document 


DOM 
‘<{DOCTYPE html...» 


(various objects) 


<img id-"imgl" sre =*...” .../> 


Fig. 3.18 Each Element in an HTML Document has a 
Corresponding Object (an Instance of Element) that can be Accessed 
Using getElementByld( ). HTML Attributes of an Element can be 
Specified Using the setAttribute() Method. 


Fig. 3.17 gives the JavaScript show( ) function. First, the function calls the | 
gtElementById( ) method of the document object, passing it the value of the | 


first argument passed to it (which is the String imgl in both calls to show( )). | 


This method takes a String and returns a JavaScript Object that represents the 


i its id attri This 

document ele; i ified String as its id attribute value. 
ment the specified String : 

ie : hat allows JavaScript code to 


object, in turn, has a method setAttribute( ) t 3 
i A but 
‘sign values to the attributes of an img element, such as eect 
(ig, 3.18). So the show( ) function uses this method to rta of the img 
“cond argument (a String representing @ lg e different image to be 
“ement, After this change is made, the browser DES 
“played for this img element. n 
m Putting this all together, we can sce that the ne! When the mouse moves 
tially displays the image at relative URL pua a second argument of 
cur this image, the show( ) function is called ow at URL CFP22.png. 
; ith the one MET 
-Png, so the image is replaced y again called, and the original image 
I £ 


en 
i; 1 the mouse moves away, show() p 
"stored 


effect is that the browser 
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Q.54. Discuss the DOM history and levels. 
locument object model was incorpora 


Netscape 2.0 browser so that JavaScript S EUN With this by, 
This model included a write( ) method, bem. could be nsed io dynamis 
add content to a document. It also provided access to form controls y 
anchor elements, so aspects of these controls and elements could be chan 

dynamically by a JavaScript program. However, many elements oft 
document displayed by the browser, including the document’s images, Ps 
not be modified through this early model. The Netscape 3.0 browser's docum 
object added the ability to modify images enabling the rollover effect, Items 
Explorer 3.0 has a similar document object model. 


The 4.0 versions of the Netscape Navigator and Internet Explorer browsen 
opened up the entire document along with style information to access fiom 
scripts, but the two browsers implemented their document object models i; 
substantially different ways. In fact, these differences in document obje 
models were in many ways more difficult for developers to handle than the 
differences in HTML between the browsers. The W3C responded to these 
emerging differences, beginning formal work on developing a standard DOM 
in August of 1997. 


Taking the Netscape and JE 3.0 versions as a starting point (sometimes 
referred to as the DOM Level 0, although there is no official standard by that 
name), the W3C released its initial DOM recommendation in October of 
1998 [W3C-DOM-1]. This is referred to as DOM Level 1 and consists of 
two modules — Core and HTML. The Core module specifies functionality 
designed to be used with any XML document, while the Level 1 HTML 
module specifies higher-level DOM access tailored to HTML documents 
The Level 2 DOM also consists of Core and HTML modules along vi? 
several others, particularly Events and Style, that extend Level 1 functional 
Level 2 HTML is incompatible with Level 1 HTML in some ways ani? 
viewed by the W3C as obsoleting it. Portions ofa Level 3 DOM have beco™ 
W3C recommendations, but browser support for this level is still evolving?! 
the time of this writing, and for the most part the changes from Level? 


not impact HTML document handli ene! 
in do more 8 
XML document processing. pen as they 


One of the key contributions of the W3C effort has been to generalize 


D $ 
p ao Beond im we as a means for a scripting language to Rem appli 
n Towser. Instea bs 
to arbitrary XML documents "erbe, cadi s 


is design 
Mosuffraténdii. vemos well as to HTML and the DOM is d adii 


: É tions written in languages such as Java in? 
to being used by Scripts running within tities 


Ans. A relatively simple d 


Sey, 


| 
ted in th | 
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(.GPy, June 2015) 
9r XML document 
form lement is the.root of the docum 
m ie document object model makes thi 
jrascriPt programs. 

os 6. Define the term text nodes, 


s. Instances of the Text DOM object Cal 
anything in the HTML dud fs ee eec 
ar these elements is Node. TEXT NODE 63), The main propery or ten 
alee is data, which is the text represented by the Text node, Assigning a 
peas this property changes the corresponding text content displayed by the 
browser. 

There is no guarantee that the character data content of an element will 
te placed in a single Text node. Instead, the Element node may have several 
Text nodes that are siblings of one another. The normalize( ) method of Node 


can be used to modify subtrees so that this does not occur. 


IS tree of elements accessible to 


data 


0.57. Discuss element nodes in document tree, 


Ans. Nodes of type ELEMENT_NODE (1) are instances of the Element 
host object, and have certain properties in addition to those belonging to Node. 
The one nonmethod property unique to Element is tagName, which is just 
another name for the nodeName property. Table 3.5 lists some of the key 
methods of element. 


Table 3.5 Some Methods of Element Instances 


Returns value of attribute having name 
given by the String argument, or the 
empty string if no value (even a default) 
is available for the given attribute name. 


EtAttribute (String) 


StAttribute (String, String) 


ified, or an exception 
ibute is read-only. 


Tem 
*VeAttribute(String) 
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Returns Boolean value indicatin 
or not the Element has an attri wi 
the specified name. 

Like the method with the same " 
document, but only returns those ut 
instances that are descendant, "s à 
Element. this 


hasAttribute (String) 
bute Wig 


getElementByTagName(String) 


E 


Q.58. Discuss node object in the document tree. 


Ans. The document tree accessible to JavaScript programs Tunning wit} 
a DOM2-compliant browser consists of a variety of node types. Some " h 
of the tree are JavaScript objects corresponding to HTML elements like htni 
or body. Other nodes may contain text representing the content of an elemen 
or the white space between elements. Yet other nodes may represent the let 
of HTML comments. There is even a node representing the document ty 
declaration. Each of these types of nodes is represented by instances qf; 
particular host object. For instance, document elements are represented y 
instances of a host object named Element, text and interelement white space 
are represented by instances of the Text host object. To simplify the definition 
of these various host objects, the DOM defines a generic Node host object 
that contains properties that are also part of any object that might be foundia 
the document tree, including Element, Text and several other host objects 


Some of the key properties of the Node object are listed in table 34 
table 3.7 and table 3.8. 


Table 3.6 Nonmethod Properties of Node 


Description 


nodeType Number representing the type of node (Elem 


Comment etc.). See table 3.8. 
String providing a name for this Node (form of na 
depends on the nodeType; see text). 

Reference to object that is this node's parent. ji 
Acts like a read-only array containing this node’ K 
nodes. Has length 0 if this node has no children. 
Previous sibling ofthis node, or null if no previous $ 
exists, js 
Next sibling of this node, or null if no next sibling td 
Acts like a read-only array containing Att i 
representing this node's attributes. 


nodeName 


parentNode 
childNodes 
PreviousSibling bli 


nextSibling 
attributes 


de in fig. 3.19 can be used to produce an 0 
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Type Property of Node 
ot Provided by IE6) 


Je 3.7 Some Possible Values for the noke 


b i 
Ta stances (the Symbolic Constants are n 


I 


Symbolic Constant 
Node.ELEMENT NODE 


Host Object Tj ype 


; Node.ATTRIBUTE NODE "ig Ts 

3 Node.TEXT_NODE Text 

8 Node.COMMENT NODE Comment 

9 Node.DOCUMENT NODE Document 
Node.DOCUMENT TYPE NODE DocumentType 


Table 3.8 Method Properties of Node 


Method 
hasAttributes ( ) 


Returns Boolean indicating whether or not this 
node has attributes. 

Returns Boolean indicating whether or not this 
node has children. 

Adds the argument Node to the end of the list 
of children of this node. 
Adds the first argument Node to the list of| 
children of this node immediately before the 
second argument Node (or at end of child list if 
second argument is null). 

Removes the argument Node from this node's 
list of children. 

Tn the list of children of this node, replace the 
second argument Node with the first. 


hasChildNodes ( ) 


appendChild(Node) 


insertBefore (Node, Node) 


removeChild(Node) 


teplaceChild(Node, Node) 


html element of a document is 
the document object. Beginning, 
ds to walk through the document 
For example, the JavaScript 
utline representation of the 


The Element instance representing the 
Stored in the documentElement property of 
fom this node, it is easy to use Node metho 
ttee in order to obtain information about the tree. 


A dded in an 

ment nodes contained in a document tree. This code petes Scis ifa 
HTML docum in fig. 3.20, which calls the ou ^ 321 
aii eaen alert box as shown in fig. 3.21. 


"ton is clicked and displays the results in an 


!! "TreeOutline.js 


enting 2n 


H " 
‘reeOutline returns a string repres document tree- 


wn dtline of the Element nodes in the 
nction treeOutline( ) { 
} return subtreeOutline (docum 


ent. documentElement, 0); 


Web Technology 
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ns a string representing 


turi 
onding to the tree 
*root". 


// subtreeOutline re 
// an outline corresp' 
JI structure of à Node tree rooted at 
|| “level” indicates indentation level of root. 


function subtreeOutline(root, level) { 
yar retString = «.// String to be returned 


/I Work around browsers that don't support Node 
var elementType — window.Node ? Node. ELEMENT NODE : 1; 


|| 1f this root is an Element node, then print its name 
/| and recursively process any children it has. 


if (root.nodeType == elementType) { 
retString += printName(level, root.nodeName); 


yar children root.childNodes; 
for (var i= i«children.length; i++) { 
retString += subtreeOutline(children[i], level+1); 
} 
} 


return retString; 


// printName creates a string consisting of 
ji the given string “thisName”, indented 
// as indicated by “level”. 
function printName(level, thisName) { 

var retString = “”; 

. for (var i=0; i<level; i++) { 
TetString += “..”; 

} 

retString += thisName + “\n”; 

return retString; 


g S davas ke Function treeOutline for Producing Outline 
«presenting the Tree of Elements within a Document 
<!DOCTYPE html 


PI 
UBLIC *-//W3C//DTD XHTML 1.0 Strict//EN” 


“http://ww 
tp://www.w3.org/TR/xhtml1/DTD/xhtml 1-strict.dtd”> 


<html xmins="http:, 
heads ^ tE/www.w3.org/1999/xhtml”> 


<title> 
TreeOutlin 

</title> e.html 

<!— Import treeQut 

<script ty, 

</script> 
</head> 
<body> 

<p> 


Text withi 
xp ithin a “P” element, 


<ol> 
<li>First elem, 
<li>Second e, 


line( ) functi 
a t on --> 
Pe=“text/javascript” sre=“TreeOutline.js”> 


ent of ordered li m 
ement.«/li-- list.</li> 


C " 
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ata Call function producin, 
element tree --> uda 
<form action=“”> 
<p><input type=“button” name: 


tline of this document’s 


"button" 


onelick-«yj, value-"Click t ine” 
</form> Wwindow.alert(treeOutline( wee 
<body” d 
</html> 
cu 
fig 3.20 HT! 'ML Do pia that Uses TreeOutline Function to Display an 
ement Tree for the Document dini 


[JavaScript Application] 


Fig. 3.21 Alert Box Produced by TreeOutline.html 


0.59. Describe the term document noi de. 
Ans. Technically, the document object itsel 
‘tee node and therefore also has all of the properties ani 
lable 3.6 and table 3.8. In fact, while the html element is the root o 
bs document, in the DOM the document object is considered as the root 
ethe Node tree i it is the parent of the html Element instance, pes its d 

ParentNode value is null. Thus, documen nt for no 
senting markup outside the htm! element, 

ant type declaration. 

2 is È ddition to the properties ithas byv 
as a number of additional propere? 


f is considered to be a Dom 
d methods listed in 
fan 


t provides à pare 
such as comments or the 


e document 


irtue of being a node, thi 
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Many other esp 
Table 3.9 Some P 


Property 


doctype 


referrer 


createElement (String) 


createTextNode (String) 


getElementByld (String) 


ecially useful document properties are listed in table 3 | 
$ | 


roperties of the Document Object 


OR 


An Object representing the docume 
type declaration, if present, or tul i 
not. Key properties are publiclg " 
systemId, which are String Values 
corresponding to the declaration’, 
public and system identifier, respectively, 
String representing the content of the 
title element (can be modified), 


Object representing the body element 
of the document. 


String representing the cookies associated 
with the current document. 


String representing absolute URI forthe 
document (read-only). 


String representing domain portion of 
URL, or null if a domain name is not 
available (read-only). 


If this. document was loaded because 
hyperlink was clicked, this String is the 
URI ofthe page containing the hyperlink 
Otherwise, it is the empty string. 
Given argument representing an elei 
type name (such as div), return a 
Element instance corresponding t° te 
specified element type. 

Returns a Text instance containing the 
given String as its data value. f 
Given argument corresponding Pa 
value of the id attribute of an elem 


ment 


z (2 
returns that Element instance, 01" s We 


null if no document element 
specified id attribute value. 


an array) of Element 
Sponding to each element 


inthe document hay; 
avi j 
type name, ing the given element 
Q.60. Explain how event canceling and form validation is done in DOM ? 
i ts on certain HTML i 
Ans. For certain events elements, the bri i 
y default event listener that is called after all other list Praec 


eners for all other events 
onthe element have been called. For example, a default listener is the one that 


rocesses a click event ona hyperlink, causing the browser to load a document 
from a specified URI in place of the Current document. Another default listener 
ig the one called after a submit button is clicked on a form. This listener 
creates a query string representing the form data and submits it in an HTTP 
request to the URL specified for the form's action attribute. 

Default event listeners are not place in an ordered event list and thus are 
not affected by calls to stopPropagation( ). However, many event types, 
including click and submit, are cancelable, which means that the browser can 
betold not to perform any default action associated with the event. When the 
preventDefault( ) method (which takes no arguments and returns no value) is 
called on an Event instance, it cancels the browser's default event listener. 

Canceling the browser's default action is often used in conjunction with 
form validation. For instance, consider an HTML document Form 
Vilidation.html containing a text box named requiredField within which the 
user is supposed to enter data before clicking the submit button on a form 
tamed validatedForm. Then we can validate the user's data entry as follows. 
Fist, we will associate a listener with the submit event on the form- 

; FormValidation.js 

var form = window.document.getElementByld(* ie 
form.addEventListener ("submit", validateForm, fa rs Nee 
like qu code for the function called by the listener ™ y 


validatedForm"); 


function vali ent) “requiredField”); 
var din da a nil getElementBydl Bea a : 
Var fieldValue = textfield.value; Il ge peque submit form. 

TE text box contains only white spac’, a ie true if 

/! This test uses a regular expression; m hite space- 
/! the text box is empty oF contains only V 


Internet and Web Technology 


j «(field Value) { ; 
if (/^s*$/.tes s st (“Data must be entered in the fieldin” 4 


window.a » 
bmitting the form ) 


“before su 
event preventDefault( y 
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) 


return; 


) 


Q.61. Discuss the role of JavaScript in form processing, 


Ans. JavaScript plays important role m tom processing. HTML fy 
are used for accepting user inputs. JavaScript helps in validating these in 
and also to perform some processing on the basis of certain events, ^ 


The following script shows an example of capturing the event ofa buty 


getting clicked — 
<html> 


<head> . . 
«script type = “text/javascript”> 


^.^ function display alert( ) { 
alert (HelloWorld!") 


</script> 
</head> 
<body> 
<form> 
<input type = “button” value = “Press it” 
name = *myButton" onClick= “display_alert()”> 
</form> 
</body> 
</html> 
Using this code, we have a button on the screen having value “Pres if 
On pressing or clicking of this button we call the function display. ale" 
shows an alert box having the message “Hello World”. 


. 0.62. How can you perform validation using JavaScript 2 show th 
validation using JavaScript with simple form having name, phone 
and email field. (R.GF. 
had eer ail aren a, ve 
server sir € necessary data and then pressed the submit s m 
form be resub; rig send all the data back to the client and HU dé 
was idis Pe: with correct information if the data entered t0 Nd 
form's dois à or was simply missing. JavaScript provides à w eb gt 
There are th n the client's computer before sending it to the 

© types of form validation, which are as follows ~ 


pe mo 
"E 


necked 


€ pt with si 
ail field is as follows — Simple form havin 
gem 8 name, phone number 


idat i 
eto data when onsubmit event is occuring. e 
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andatory fields are filled in, It eem be 
he form and check for data, require 
(ii) Data Format Validation — 
for correct form and value, 
example of JavaScri 


checked to make sure all 
Just a loop through each 


Th i 
e data that is entered must be 


<html> 
<head> 
<title>form validation </title> 
Bo- o. type = "text/javascript"» 


JF Es , 
b pong validation code will come here 


</script> 
</head> 
<body> 
<form action = “/cgi-bin/test.cgi” name =“myForm” onsubmit 


=“return(validate( )); s 


E cellspacing = "2" cellpadding = "2" border = “1”> 
<td align = "right"? Name </td> 
<td> <input type = “text” name = “Name”/> </td> 

</tr> 

<tr> 
<td align = "right"? phone </td> 
<td> <input type = “text” name = "phone" </td> 

</tr> 

<tr> 
<td align = “right”> Email «hd» 
<td> <input type = “text” name = 
<td align = “right”></td> 
<td><input type = “submit” 
value = “submit [><|td> 

</tr> 

</table> 

, oo 
ody» 
</html> 2 


"Email" </td> 


ht UR AE are calling validate( ) to 
, ' the above form to perform basic validation, wea nes implementation 


is val; : 
Validate( ) function is written as — 
<script type = “text/javascript”? 

« 


l-- 
//Form validation code will come add 


function validate( ) 
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if(document.myForm.Name.value Se 


alert(“Please provide your name!”); 
document. myForm.Name.focus( ) 
return false; 


if(document.myForm.Phone.value --*5y 
document. myForm.Phone.value.length 1—9) 


alert("Please provide a phone number”), 
document.myForm.Phone.focus( ) 
return false; 


if(document.myForm.Email. value ==") 


alert(“Please provide your Email!"); 
document.myForm.Email.focus( ); 
return false; 
} 
return(true); 
j 
ll--> 
</script> 


Now, we can validate our entered form data before submitting it tole 
Web server. An email address must contain at least @ sign and a dot (). 
<script type = “text/javascript”> 
< == 


function validate email( ) 


( 


var emailID = document.myform.email.value; 
atpos = emaillD. indexof(“@”) 


dotpos = emailID.lastIndexof(‘*.”); 
dae l(dotpos — atpos < 2)) 


alert(“Please enter correct email ID”) 


document, myf i 
Iytorm.email.focus( ); 
Teturn false; Q 


Teturn(true); 


M~-> 
</script> 
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x 1. Write a script to add two integers, 
<html> 
Sol <head> 
<title> Addition of two integers </title> 
«script language = "javascript" 
var no, nol, no2, no3, result; 
no = window.prompt(* 


"Enter the value of fi " 4*0"); 
nol = window.promp irst number" + “0”); 


("Enter the value of second number" 
MTS 

no2 = parselnt(no); 9 

no3 = parseInt(nol); 

result = no2 + no3; 

document.writeln(“<h3> First number is” + no2 + “</h3> 


<br>”), 
document.writeln(“<h3> Second number is" + no3 + “</h3> 


<br> <br>”); 
document.write(“<h2> Result is” + result + “</h2>”); 
</script> 
</head> 
<body> 
</body> 
</html> 


Prob.2. Create a HTML page with JavaScript, which takes oneinteger number 
as input and tells whether the number is even or odd.  (R.GRV, June 2015) 

Sol. <html> 

<head> 3 

<title> check number is Even or Odd </title> 

<script language = "javascript" 

var a, b; » ey» 

a = window.prompt(“Enter the value” + “0”); 

b = parselnt(a); 


if (b%2 ==0 ý “cfh2>"); 
( ae. MR (“<h2> The number is even ) 


el: ; *«h27"y; 
se document writeln("ch2» The number is odd 


</script> 
</head> 
<body> 
</body> 
</html> 
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Prob.3. Write a function in J avaScript which display digital Clock Wh 
XA a 


.GPE, | 
HTML page is loaded. Gi June 2010, 201) 
Sol. <html> | 
<head> 


<script type = “text/javascript”> 
function digitalclock( ) { 

var d = new Date( ); 
document.write (d.getHours( )» 
document.write(“:”); 
document.write(d.getMinutes( )); 
document.write(“:”); 
document.write(d.getSeconds( )); 
</script> 

</head> 

<body onload = “digitalclock( )"7 
</body> 

</html> 


Prob.4. Write an HTML form accepting an integer having 4-digits, 
Provide necessary validations using JavaScript. Input should not accept 


characters. (R.GP.V., June 2016) 
Sol. <html> 
<body> 


<script type = “text/javascript”> 
function noNumbers(e) 


{ 


var keynum; 
var keychar; 
var numcheck; 
r (window.event) 


keynum = e.keycode; 
Terenti 
keynum — e.which; 


Vikesuumlsq) 
keychar = string fr 
numcheck = / d i oed 
return numcheck.test(keychar); 


else 
return keynum; 


ode (keynum); 


} 
</script> 
<form> 
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<input type = “text” oneKe D 
form» yDown 
</body> 

</html> 


E to use email validation ; 
prob.5. How ait validation in JavaScript fi ; 
paid email address ? Vite over code (QUI iun er 


TyP 


eru 


= retur checkDigit (event)”/ 


<title> Validate Email Address «ti 
<script type = “text/javascript’> ‘a 
function validateEmailA ddr 
var the_at_symbol = the email address i d «rb. 
var the dot symbol = the email address astindox Oe Y 
varthe space symbol = the email address.indexOf ( "y 
/| Now see if the email address is valid , 

if ( 
(the at symbol ! = —1)&& //There must be an @ symbol 
(the_at_symbol ! = 0)&& //The @ symbol must not be at the 


(the dot symbol ! = —1)&& //There must be a . symbol 
(the_dot_symbol ! = 0)&& //The . symbol must not be at the 
first position 
(the_dot_symbol> the_at_symbol + 1) && //Musthave something 
: after @ and before. 
(the_email_address.length > the_dot_symbol + 1) && //Must 
T ~ have something after. 
(the space symbol = = —1) //Must not have a space anywhere 


ess (the email address) { 


first position 


alert (“Email address seems to be correct."); 


return true; 
else " 
ae (“Error !!! Email address seems to be incorrect.”); 
return false; 
} 
</script> 
teat B 
<body> E 
<h1> Please enter your email address Land "is "post" 
<form name = "the form" action = vemm 
onSubmit = “var the_result = validateEma! 
(this.email address.value); 
return the result; stay” name = "email, address» 
Email address : <input type = “text” fot nit form" 
<input type = “submit” value = 
ES </form> 
Shins D> 
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Prob.6. 
displays the sum, 
an alert dialog. 
Sol. The code is as follows — 
^ «html? 
<head> . 
«title» simple calculations </title> 
<script type = “text/javascript”> 
function show. alert( ) { 
var nol, no2, no3, product, sum, average, smallest, 
nol = document.the form.field one.value; 
no2 = document.the form.field two.value; 
no3 = documentthe form.field three.value; 
product — nol * no2 * no3; 
sum = nol + no2 + no3; 
average = sum/3; 
if (nol > no2 && nol > no3) 


average, product, 


if(no2 > no3) 


largest-nol; 
smallest=no3; 


} 


else 
{ : 
largest=nol; 
smallest=no2; 
} 
} 


else 
i. 
iius > nol && no2 > no3) 


if(nol > no3) 

{ 
largest-no2; 
smallest-no3; 


else 

{ 
largest-no2; 
smallest-no]; 


Write JavaScript that inputs three integers from the m | 
smallest and largest of these Bá ei | 


(R.GP. E, Ji 


Tr nj 
mei 


Une 201 | 


gn ates, 


else 


( 
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if (n03 > nol && no3 > no2) 


if(nol > no2) 


largest-no3 
smallest-no2 


j 


else 

{ 
largest=no3 
smllest-noi 


j 
j 


alert(“product is” + product + “\n” 
“sum is" + sum + “\n” 
“Average is” + average + ^n" 
“largest is" + largest + ^n" 
“smallest is” + smallest + ^n"); 

</script> 

</head> 

<body> 

<form name = "the form"» 
Number! : <input type = “text” name = "field one" <br> 
Number? : <input type = "text" name = "field two"» <br> 
Number3 : <input type = "text" name = "field three"? <br> 
<a href = “#” onclick = “show_alert(); return false;”> answers </a> 
</form> 

</body> 

</html> 


Prob. 


click 7. Write a JavaScript example that displays data when a button is 
eked, 


(R.GBM, June 2013) 
Sol. A simple example to accept two numbers fromthe ma roina 
multiplication of these two numbers on clicking a button is as 

<html> 

<head> 

<title>calculator</title> — 

<script type = “text/javascript ^ 

finction multiply( ) 


the 


Jd_one.value; 
var number 1 = documentthe form fier cL two.value; 


Var number 2 = document. the fom 
Var resultant = numberl'* number» 


= resultant, 
Ocument.the form.the_answervalue 
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</script> 
</head> 


<body> » 
<form name = a “text” 
i mber : <input type = 
First nu name = "field one"» <br> 


; — ov n 
ond number : «input type — "text 
i name = "field two" > <br> 


t is : <input type = "text" 
Thie prodao abe Sethe. result" > <br> 
<a href = “#” onclick = “multiply( ); return false; 
Multiply!</a> 
</form> 
</body> 
</html> 


jel 


2 
JE) Dows\Desktop\1.haml ] 


First number : |5 

Second number : |4 — — 
The product is : {20 

Multiply! 


First number : |5 = d 
Second number : |4 " 


The product is : 


Fig. 3.22 Displaying Result of Multiplication on Clicking the Button 


Prob.8. Write a ‘JavaScript code to calculate the factorial of a given 
number use text box and submit to give input and perform the calculations 
- (R.GP.V,, June 2014, Dec. 2016) 

o. 


<html 

<head> 

<title> Factorial </title> 

<script type = “text/javascript’> 

ain calcFactorial (factorialNumber) 

= ee =1; 

or (; factoriaINi ; ial 

; umber > 0; factorialNumber - -) 


factorialR = i 
j esult factorialResult*factorialNumber; 
return factorialResult; 


</script>, , 
</head> 


frameset cols = “100%, => 

<frame name = 
</frameset~ 
<html> : 
Save this page as factorialtopframe htm, 
<html 


<head> " 3 
<title> Factorial </title> 


<script type = “text/javascript”> 
function butcalculate onclick( ) 


{ 
try 


factorial” sre = "calcfactoria] htm"/-. 


{ 

if(window.top.calcFactorial = = null) 

throw “This page is not loaded within th ». 

if(document.forml.txtNuml.valuc = =“ my rect frameset”; 

throw “!Please enter a value before you calculate it factorial”: 

if(isNaN(document.form] .txtNum1 value) VENENIS 

throw “!Please enter a valid number"; 

if(document.forml.txtNuml.value < 0) 

throw “!Please enter a positive number"; 

document.forml .txtResult.value = window.parent. 
calcfactorial(document.forml.txtNuml.value); 


catch(exception) 
if(typeof(exception) = = “string”) 
( 

if(exception.chartAt(0) = = “!”) 


` alert(exception.substr(1)); 
document.forml .txtNuml .focus( ); 
document.forml txtNuml.select( ); 


else 


alert(exception); 


} 
else 
{ 


alert(“The following error occ 


} 
L 
S/script> 
[head> 
Sbody> 
form action = * " name = “fom”? , 
> = : 1" size = 
<input type = “text” name = "txtNum 


mett exception.message); 


«np» factorial is 
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i = “text” name = “txtResult” size = "25"/7 <br/> 
po iue - “button” value = “calculate factorial” 

<jnpu click = *butcalculate onclick( )"/> 


name — “butcalculate” on 
</form> 
</body> 
tml> ; 
«[htm alcfactorial.htm. Then load the first 


Save this page as © 


factorialtopframe.htm, into Pape, 


your browser. 


[pop c fete 


(E) http:l/localhosumydo £i LT 


Q.63. What is DHTML ? 
- UN stands for dynamic HTML and explains different technologies 
iedby seda o ia Web pages dynamic and interactive. DHTML is atem 
nid esee o describe the combination of HTML, CSS, and scripts that 
DN nimation on the document. In simple words, we can say that 
a s i combination of HTML, JavaScript, DOM, and CSS. 
access, er i S ipting language that is used by DHTML to contol 
Model and defines is e HTML elements. DOM stands for Document Obi! 
doces andhem pas set of objects for HTML, and a standard wa" 
nipulate them. CSS allows Web developers to control the sil 


and layout of Web pages. 
0.64. How D i 7 

La E e e sa is used in Internet Explorer ? (R.GP.V., June "i 

g DHTML in Internet Explorer you can do the following 


6) Movi 
ping your mouse through a heading on the top of the pr 


will cause a hidden t i 
beide ext display to appear and will change the color ? 


| pvealing io 


split into : 
to short message in the center of the 
Gv) The centered message will appear tobe | 


(v) Moving the mouse out of the headin 


ginal appearance. 
eading and Horizontal Line — Open yo . 
iis m save the file as.htm file. You a E. oot ce 
ite of the page by typing My First Dynamic Web page between TITLES. d 
TITLE. Inside the </BODY> tag, type Style = “background-color: ‘Sil nr 
< give your page that macho silver-gray color you see in many apr lic tion 
This express ion is calleda style Sheet. Because it's insidea tag, it's aine style 
sheet. As YOu can see, in this context, Style is an attribute and its value in 
sring. The string contains a style property, a colon and the value of the property. 
Astyle sheet can hold more than one property value pair and when it a à 
semicolon separates adjacent pairs. Next, center an H1 heading by typing — : 
«H1 Style = "text-align : center’>Dynamic HTML: Master the Essentials</H 1> 
after the <BODY> tag. To follow the heading with a horizontal line, type <HR>. 
ESSET] 


ayered above thetext display. 
8 will return the page to its 


ofi 


st Dynamic HTML Page - Microsoft Internet Explorer - [Working Offline] 


[Æ] C:\web\text html 


` | Dynamic HTML: Master the Essentials i 
5 


Fig. 3.24 


At this point, we are going to add an extremely important attribute to the 


SHI7 tag. This attribute, ID, will give us a way of referring to the header 


When we have to work with it in a scripting language. Inside the <H1> tag, 


pe ID = hl Header. Your document should look like this- 


<HTML> 
<HEAD> : 
LE My First Dynamic HT 


SBODY style = 
<H1 ID = hi Header Style = 


- 
ODY> 
SHTMIL- 


ML Page«/T ITLE> 


amic HTML: Master 


“background-color: ‘silver’ " 
the Essentials</H t 


m 
stext-align:center 2 Dyn 


like fig. 3.24. 


(ii) Moving 

your mo y the 
color and the content of a atti wow ee the heading will also chang? 

e page. = 


Ti 
he page in Internet Explorer looks 
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Hidden Message — To create the remaining elements of the pa, 
divide the page into segments called DIVs. Each segment starts With = Vw | 
ends with </DIV>. After we neve DESIUELUASEQIUSCK, we will "m ay 
exhibit the desired effects. Let s create a segment to hold the hidde then 
that you see in a large, bold, white font. Just after the <HR> tag, type 


<DIV ID = divMessage> 


</DIV> 
Next, type the message between two DIV tags. Put the Thess 
paragraph (that is, enclose it with a <P> anda </P>) and make ita 
Here’s the HTML to type between the DIV tags — 
<P> Movies released today are — 
«LI» Anari 
<LI> Singham 
<LI> and Many More 
</UL> 
</P> 
We have typed the message, but so far its appearance in Internet Explo 
would be pretty nondescript. We have not colored the text white, ien ; 
or made it bold. We also have not positioned the message on the page. To tae 
care of the message's size, appearance and position, we will add informatio 
to the <DIV> tag. We add the information as a group of styling specification 
in an inline style sheet. Within the <DIV> tag, type — 
Syke: = “Position:Absolute; Left:5%; Top: 10%;Visibility:Hidden;z-index:-1;font 
Style:normal; font-weight:bold; font-family:Normal;font-size:50;color: “White” 
" Es E property-value pair, Position: Absolute, tells the browser to posito 
er dis epei i. the top edge and left edge of the browser window. Tk 
vod XES rty-value pairs show one way that style sheets let you specify 
en n Bie qm of distance from the left edge and the top edged 
E Ds first of the two pairs positions the DIV's left ste’ 
om the left edge to the right and the second positiorsi 


top edge 10 percentage of the di 
The fourth pair, Visibility:Hidden Rex from the top of the browser to the botot 


REN 


BE in 
bulletedis 


The next pair position <cepsthe message invisible when the pag ue 
figure you Will see tht adi in the “third dimension”. If you look clot i 


the message in the center of the 


des irre Sethe Center of the Page — Create a <DIV> 148 all 
it 180 pixels Bu Teka, ad Pixels, rather than percentages. We will wr 
edge of the page and 200 pixels from the top * 


<DIV ID - di ] 
divLeam Style = “Position: Absolute;Left:180; Top 


CSS ang i 
ill be helpful to confine the message to 4 s Selbe "Fe 


H : i i 
il hat we can make its text Cover three eee on 2n 
the large white-font text display, we will FN rA Sae E 
ug Z — index of 0, 
osition:A bsolute:Left: 180; 


nw 
pivels " 
WIS ° DIV ID = divLearn Style = «p 
300; Width:2 1 0;x-Index:0;” > 
Rp mes sage will reside in a paragraph — 
<P> 
Learn how 
«fp dd some styling infc i 
ive will add some styling information to the <P> tag. In thi 
: ;cify an appearance, size and weight for the font. The pr ets 


to create striking effects on your Web pages 


igntbold”> size:15pt; font- 
te is the HTML for the DIV — 
<DIV ID =divLEarn Style= “Poston: Absolute Left: 180;Top:200, Width: 
0;z-Index:0;"»- 
<P ID = pLearn Style = “font-family:cursive;font-size: | Spt;font-weight: 
bold" 
Moving Boxes — To create the effect of a box that splits into four boxes, 
we position four boxes in the center of the page and give them all the same 
background color. Each box will be a separate DIV. 
Here is one way to write the DIVs for the boxes — 
<DIV ID = divBoxl1 Style-"background-color:blue;color:blue;text- 
align:center;position:A bsolute;Left: 150;Top: 180; Width:120;Height:60;2- 
index: 1”> 
</DIV> 
<DIV ID = divBox2 Style=“backgrou 
“enter;position: A bsolute;Left:270;Top:180; 
</DIV> lor:blue;text-align: 
<DIV ID = divBox3 Style="background-color-blue;co lor: luc; e x s : 
“tnter;position: A bsolute;Left: 1 50;Top 240; Width: 20; Height 0;z inde T 
</DIV> Ra 
i ;color:blue;text-align: 
*DIV ID - divBox4 Style-"background olor Pen Gzindex:l" 
et;position: Absolute;Left:270;Top:240;Width: 5 
pne f the boxes in figures, but the 
f you write the DIVs.this way, you Will oe ce 
Width gre Presents another possibility. 
tthe begi d n 
Perig ening of the document, between shin each box's <D! 
loy, fications a name and then that bei? document, type — 
ES: After the <HEAD> tag in Y? 
E =“ s 
SSryp ii Pe T OP 


nd-color:blue;color:blue;text-align: 
-Width:120;Height:60;2-index:] > 


Cnt, 


cations for these properties 


ifi 5 
dhei : ut the style spec! j>; give those - 
height four times, we can p <HEAD> and prid tag. Here's 


d Web Technology | 
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j i tion between these two ta; : 
Il put the style informat í gs. To | 
Bn MS A the style specifications and specify the backgroung AS 
bd alignment, width and height for the boxes, type — tn 


.bluebox (background-color : blue; 
color : blue; 
text-align : center; 
width : 120; 
height : 60 } 
after your newly created <STYLE> tag. When you preface the name of, 
with a dot, you create a style class. Note the consistent Syntax for the PA 
sheet. We will use a color to separate a property from its value anda semicg| 
to separate adjacent property-value pairs. With the style specified as a dis 
the head of your document, you insert the name of the class in each bid 
DIV. Here's the HTML for the movable boxes — : 
<DIV ID = divBox1 Class-"bluebox" Style=“Position : Absolute; 
Left: 150;Top:180; z-index: 1”> 
</DIV> 
<DIV ID = divBox2 Class = “bluebox” Style=“Position: Absolute; 
Left:270;Top: 180; z-index: 7 
</DIV> 
<DIV ID = divBox3 Class = *bluebox" Style=‘‘Position: Absolute; 
Left:150;Top:240; z-index: 17 
</DIV> 
<DIV ID = divBox4 Class = “bluebox” Style=“Position:Absolute; Left270; 
Top:240; z-index:1”> 
</DIV> 
Save your work and open the page in Internet Explorer, 
Changeable Box — We finish off the page design by creating the box in the 
lower right corner, The box changes color and content when you pass w 
n sear the heading at the top of the page. You can see this by comparing 
figures. By now, you have probably guessed that we will implement the ^ 
y writing two DIVs, assigning them different z-indi d making onc invisit 
We will writ i : ces and making e 
isses inb ut a script that switches the visibility of the DIVs when the mu 
= f the h e heading the returns to the original values when the mouse pass 
: E zm cading. Here is the HTML that sets up the two DIVs — " 
Width:109 ID = divReady Style = "Position: Absolute; Top:7096: Lea 
baro zindeL; Visibility Visible a 
ba eR “font-family:cursive; background- 


color:Chocolate”> 
d ate Are<BR>You<BR>Ready?</P> 


«D = di 
IV ID = divReady Style = “Position: Absolute: Top:70 


e 
color! Bel? 


%; M A | 


Width:10%;z-index:1; Visibility:Hidden’> - 


a 
pl DIV> 
. Write a code to displa; ihian 
9.65 i €p animation using DHTML, 
Ans. Refer to Q.64. Fs Dec. 2016, 2017, Nov, 2018) 


66. Explain the methods of using Css wi 
? m to demonstrate. E CSS with HTML. Write a suitable 


gra 
s There are three Mayai aad buo: E GP, June 2017) 
(i) Inline style sheets (ii) Embedded style a " 
(iii) External style sheets. i 
[(7] Inline Style Sheets — Local (inlinc) style sheet declarations. 
specific to a single instance on a page, can be used instead of <font> tags to 
specify font size, color and typeface and to define margins, leading etc. The 
inline STYLE attribute is supported by most tags. This allows the author to 
modify the properties of individual tagged regions ofa document. For example 
«h2 style = “color : red; font-size : + 7pt”> It is a heading «2» , 
There are other ways to make the same changes to this heading, for 
example, use the FONT tag to modify the font properties. 
<h2> <FONT COLOR = RED SIZE =+5> It is a heading «FONT» </h2> 
There are various ways to define in-line style sheets. However, it is now 
generally accepted as better to use style attributes rather than other tags for 
changing the rendering of text and other document entities. The reason for 
having styles is to easily define modifications to rendering attributes that apply - 
lo parts of a document, an entire document, or even an entire website. 


(ii) Embedded Style Sheets — Global (embedded) style sheet 
declarations, applicable to an entire document, are defined within the <style> 
and </style> tags, which precede the <body> tag in the HTML document and 


ate placed in the header. Á ee 
The following syntax is used to embed a global style sheet in the H 

document — 

<html> 

<head> 

<title> A Title </title> 

style type = “text/css”> 

«| 


[STYLE INFORMATION] 
> 


</style> 
speed 
ody> 
[DOCUMENT BODY GOES HERE] 
</b ody> 
</html> 
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single style sheet l 
with a sing! 


B it 
easy to make g provig My 
advantages. Web developers and Web managers may share style «xd * 


a number of documents or sites. The designers can change style shea, tty 
affecting the document. The users can also lead individual style dd Withay 
they are separately available. To access them use the <link> in the edid Whe 
as shown in the following syntax — IM 
<head> 
<link rel = “stylesheet” href=“style.css” type = “text/css 
</head> 


0.67. Write short notes on buttons and events in DHTML. 


Y 


Ans. Events are the actions that the user performs when they visit y, 
They may, for example move the mouse around or click on buttons, Wine, 
event happens it triggers objects that are associated with that kind of aa 
Event Handlers catch these events and execute code in response. Events canbe 
classified into 4 categories for ease of understanding — 


() Window events (ii) Mouse events 


(iii) Keyboard events (iv) Form events. 


trigger a — Events ~ The window itself has its own events, which 

: being resized (o snm ge is starting up (onLoad), shutting down (onUnload) 

ECE size), moved (onMove), canceled (onAbort) or when at 

moves to fi rror). There is also an event triggered when the windo 
o i cad (onFocus) or changes to background (onBlur). 

(ii) Mouse Events — The mouse has a few events associated with it 


when ; hi 
ewe cdd 1s pressed (onMousedown) on top of an element and whenitis 
ouseup). When the mouse moves and the pointer is already 0% 


an ele 
: (oaen a ousemove) and when it moves away from the element 
(o Monscéven) a are triggered also when the pointer is over an elemet 
ae nd when it is clicked once (onClick) or twice (o npbidich 
iii ; 
eyboard Events — Events can be triggered when the key P 


pressed down (onKe 
ydow, a t 
key sequence, down press Rd, it is released (onKeyup). The 97? à 


i s) 
Gv) F. elease, triggers another event (onKeyp™ 


generated. 


XML & PHP | 


ML — INTRODUCTION TO XML, USES OF XML, SIMPLE XML, ' 
XML KEY COMPONENTS, DTD AND SCHEMAS, USNE, 
WITH APPLICATION, TRANSFORMING XML USING 
Í XSL AND XSLT 0004 3 5) 


New What do you mean by XML ? Why is XML such an important 
development ? (R.GP, June 2013) 
Ans. Extensible Markup Language (XML) is a markup language, much 
like HTML. Both XML and HTML are based on Standard Generalized Mark- 
up Language (SGML). SGML was developed in 1970s and was used by 
organizations like IRS, IBM and Department of Defence. SGML focuses on 
content structure. This language is good for creating catalogues, manuals, 
etc. But it is a very complex language and its specification is not freely available. 
XML grew out of an effort to reengineer SGML for the Web, generally to 
make it simpler and easier to parse. XML was approved by the Web consortium 
in 1998 and is the official language for WWW consortium. ` 
XML is called meta language because itcan create other markup languages. 
This language was designed to describe data and ils tags are not pre-defined. 
XML uses a DTD (Document Type Definition) to formally describe the un, 
lt acts as an infrastructure because it is the: core building block for a wide 


Tange of other technologies. 


0.2. What are the naming rules in XML ? : 

` Ans. The following rules are followed in nam! 

" G) Names can begin with letters or the c 
T è 

other punctuation characters. abers, hyphens, aid peiods 


(ii) After the first character, nu 
Permitte d. 


(iii) There can be no SP 
"U^ (iv) There can be no c9 


(RGPK, June 2013) 
ing elements — : 
haracter, but not numbers 


are 


aces in names. 


lon (:). character in names. 
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ace is not allowed after the opening < character, Then 
t come just after it. However, space is allowed beg t 
Te the 


164 Inte 

(v) SP 
the element mus 
closing 7 character. 


(vi) Names do not start with the letters xml, in uppercase, M 
t 


or mixed. 


Q.3. Write short note on characteristics and uses of XML, 


Ans. Characteristics of XML -There are three important chaia 
of XML, that make it useful in a variety of systems and solution — 
(i) XML is Extensible — XML allows you to create your Sii 
descriptive tags or language, that suits your application. i 
(ii) XML Carries the Data, does not Present it — XML allows " 
to store the data irrespective of how it will be presented. 


Ctetistcg 


(iii) XML is a Public Standard — XML was developed by ņ | 


organization called the World Wide Web Consortium (W3C) and is available;, 


an open standard. 
Uses of XML - A short list of XML uses are as follows — 
(i) XML can work behind the scene to simplify the creation of 
HTML documents for large web sites. 
(ii) XML can be used to exchange the information between 
organizations and systems. 
(iii) XML can be used for offloading and reloading of databases. 
(iv) XML can be used to store and arrange the data, which can 
customize your data handling needs. 


(v) XML can easily be merged with style sheets to create almost 
any desired output. 


(vi) Virtually, any type of data can be expressed as an XML document 


Q.4. Write a simple program in XML. 
Ans. <?xml version = “1.0” 2» 
«contact — info > ` 
Stance Bharat </name> 
company- Shivanipublicati e 
_<phone> 1234 Sichonc> N T 
</contact — info» 
Q.5. Create an XML document 
day, date, time of events and name. 
Ans. 
<? xml version —1.0" ?» 
Sappointments> 
<day>Monday </day> 
<date> 12/11/05 </date> 
<time> 11:00AM </time> 


<name> Ravi E 
B name> 
</ appointments» « - - me: 


H de 
which holds appointments that inclu 
(R.GBV.,, Dec. 


| me si 


Á Discuss about XML ys HTML, XML & PHP. 165 


Or 
D ifferentiate between HTML vs XMi, 


Or 
pifreren tiate between feature of XML and H 
Ans: XML is not a replacement for HTML 
milarity pedis and HTML is that both languages use mys 1 
re documents. This is perhaps the only real similarity between thetwo, 
s XML and HTML were designed with different goals — : 


à XML was designed to describe data and to fo 
L was designed to display data and to focus on tier aie E" 


(ii) HTML is about displaying information, whereas XML is about 
gscribing information. 


XML is extensible and its own tags can be created, But HTML has a 


(R.GPE, June 2016) 


TML. (R.GP,, Dec. 201 6) 
- In fact, they are used together. 


is, HTM 


| stricted set of tags like <TABLE>, «Hl», <B>, etc. For example, consider 


issigning a Web page to puta library catalog on the Web. 

HTML Code— 
<HTML> 
<BODY> 
<H1> Web Technology </HI> 
«H2» Patrick </H2> 
«H3» 2010 </H3> 
«H3» PHI </H3> 
</BODY> 
</HTML> 

XML Code — 

<BOOK> 

<TITLE> Web Technology </TITLE> 
<AUTHOR> Patrick </AUTHOR> 
<DATE> 2010 </DATE> 
<PUBLISHER> PHI </PUBLISHER> 


<IBOOK> ses 
up" HTML ° Ar 
7. What is XML ? How XML i dl? P^ Gy, June 23) 


mp lementing to each other ? 

Ans. Refer to Q.1 and Q.6. 

28. How XML is compatible with 
^". It is needed to have a mechanis 


CSS and XSL? 


m to describe how the document 


ó " heets (CSS), 
nad ? displayed. One of these mechanisms I$ rani ae language 
a ; re à 

y, (extensible stylesheet language) is Ro CSS used by HTML. 


» and XSL is more sophisticated thal 
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d to define how an XML file should be displ m" 
L file into a format that is recognizable to a inane b (ii) Line 2 states that 


Normally XSL accomplishes this by transforming "€ — gara 
HTML element. "Beg ^ : El 
ment. Attributes give more q ements describe mark 


XSL can be use 
transforming the XM 
such format is HTML 


XML element into an 
i ibutes. 'R. " ocu! 
DS E E < (R.GPV, Dec, 2010) ne 0 or more attributes. For gll about the elements i A an XML 
iin elements to show the employes ^ YPloyee XML document can 
can 


components of the XML. : (R.GP.K.,, June 2 :enati > 
Ans. Element Type Declaration — An element is declared in a Dm) qne designation element, in tum, 
using the element type declarations (Element a For example, We can th " 
declare an element called as book-name using the following declaration — The keyword ATTLIST describes the attri 
<!ELEMENT book name (#PCDATA)> Fig, 4.2 shows an XML docum attribute (s) for an element. 
Here, book. name is the name of the element, and its data type is PCDATA ent containing an inline DTD. 
element name as generic identifier. The data type s 


The XML jargon calls an ; 
called as content specification. The element name must be unique within a DTD, {DOCTYPE email | 
<!ELEMENT 


‘Let us consider an 
example. Suppose that, we 
want to store just the name 
of a book in our XML 
document. Fig. 4.1 shows an 
XML document and its 
corresponding DTD that 
specifies the rules for this 
XML document. In this 
example, line numbers have 
been added for the sake of Fig, 4.7 Book XML Document and External 
understanding easily by DTD Declaration , 
providing references during | jin the figure, the message element has three attributes — from, to, and 
discussion. The actual XML document and DTD do not contain line number. Subject. All the three attributes have a data type of CDATA (which stands for 

Let us understand this example line by line. Understanding the XML ‘haracter data), and a #REQUIRED keyword. The keyword #REQUIRED 
document (book.xml) — E indicates that this attribute must be a part of the element. 

(i) Line 1 indicates that this is an XML document. i 

(ii) Line 2 is a comment. : 0.10. What is XML ? Whatar e the differences between XML and HTML 1 
— (iii) Line 3 declares a document type reference. It indicates that v Write an XML schema for validating an XML file.  (R.GEV, Dec. 2011) 

document makes use of an external DTD. The name of this exte? Ans. XMI 

DTD is book. dtd. Also, the root element of our XML document is an eleme" | vi - Refer to Q.1. 
called as myBook. Difference between XML and 

(iv) Lines 4-6 define the actual contents of our XML document ^ Use of XML Schema to Validate an XMLFile- 
These consist of an element called as book name. (Sample — 

Understanding the DTD (bookdtd) = ` TET NX YT 

(i) Line 1 is an element type reference. It indicates that the 100 SB xl version pon 
element of the XML document that this DTD will be used to verify, wi br | Sole: " 
a name myBook. This root element i.e., myBook contains one sub-elem? «Title» Web Engineering </Title 
called as book_name es j : <Author> Prashant </Author> 

SBook> 


Explain the key 


<?xml version =“15,0” ?> 


email (messa; 
<!ELEMENT message; (EPCDAA) > 
! 
ae message ` CDATA #REQU 
» S message CDATA FREQ REDS 
<!ATTLIST message j CDATA S 


XML document (book.xm1) 
1. <?xml version=“1.0”?> 


` «1— This XML document refers to book.dtd -> 
. <!DOCTYPE myBook SYSTEM “book.dtd”> | p 
| «email . 
<message from = “ramakant” to = “hari” subject = "where are you?”> 
It is time to have food! g 


. <myBook> 
. «book name»Computer Networks</book_name> 


. </myBook> 


aua Um 


</message> 
| </email> 


DTD file (book.dtd) 
1. <!ELEMENT myBook (book name) >. 
2. <!ELEMENT book_name (#PCDATA) > 


Fig. 4.2 Declaring Attributes in a DTD 


HTML - Refer to Q.6. 
Consider the following 


Jo: oe . 
468 Internet and Web Technology T" Such an Men = referenced by Prefix; XML & PHP 169 
The DTD for the above uem sot sig (gt sensi ampersand ae fie entity name with a pe 
<!ELEMENT Book (Title, Autho reference " He Or example, given th Or beginning a gene rcent 
<IELEMENT Title (#PCD ADY ity has been defined as we did, the entip, = the Langue eee parer 
GIELEMENT Author (#PCDATA)> en <IENTITY % il8n ity declaration. e parameter 
` 1 hema for the same document. It must b "Jang 
€ ges © Saved ag xml:lang% LC "IMPLIED 
book.xsd. si : ET n 
E ? xml version —"1.0" 2> dir (Itr[rtt) BeCode; "IMPLIED 
«xb: schema xmlns : Eo http://www.w3.org/2001/XMLSchemars > IMPLIED" 
: -"Book"7 : 
En TVS g same as the declaration 
/^— «xb:sequence» <! ENTITY % il8n 
«xb:element name "Title" type-"xb: string”/> “Jang NMTOKEN " 
«xb:element name -" Author" type —"xb:string"/^ xml:lang NMTOKEN IMPLIED 
</xb:sequence> dir (triti) #IMPLIED 
</xb:complexType> z #IMPLIED” 
Ee eel Another example of th f i 
</xb:schema> not à € use of parameter entiti 
The schema written should be referenced in the corresponding XM, tribute list declaration for the html element ig les, the XHTML 1.0 Strict 
document for validation. <! ATTLIST html 
<?xml version ="1.0"?> %il8n; 
xs <Book> | id ID #IMPLIED 
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” | l g - « 
Aa eann ome > mins "QURE #FIXED ‘hip: /Awww.w3.org/1999/xhtml 
itle>Web Engineering</Title> Í 
anis thor>Prashant </Author> ! | 9.12. What syntax rules must be followed while creating an XML 
| document ? 


The line xmlns :xsi=“http://www.w3.org/2001/XMLSchema-instance” | 3 
refers to the elements defined in the http://www.w3.org/2001/XMLSchemz- ,,. Ans. The syntax used to create an XML documentis called markup syntax. 
instance definition are used. The line xsi:schemaLocation=“http:/ Itis used to define the structure of data in the document. The following rules 
www.abcde.com/book.xsd" refers to the schema defined at that location. 2 aapa with the markup syntax — 

(i) XML tags are case sensitive. 


Q.11. Explain enti oe | i) 
Ans. An en sg nx Nun | (ii) XML documents must have a starting tag and closing tag. 
the keyword ENTITY fc P M an Ke declarations, each of which begins m (iii) XML documents must have one and only one root element. 
<!ENTITY pride entity name and its replacement text, lke (iv) XML attributes values must be quoted. 4 
This state s 3 n" (v) XML elements must be properly nested. . 
DE, Rd entity reference &gt; to be the s^ | (vi) XML preserves white spaces, although you can use white spaces 


. — &#=62; which in tum j | 
= oe i tra isan XML character reference to the greater-than charac? | "content including line breaks. 
from within doc as gt is known as a general entity and can only be referen Q Pw 
n documents defined by the DTD, XML also provides for a different -13. Explain briefly XML validation. 
Or 
i: Define XML validators with example. 


indicated in the DTD n - 
i by following the ENTITY keyword with a percent sign QU Ans. The XML validation is discussed below — 


ions taken from th ict DTD- 

! e XHTML 1.0 Strict y = 
E ENTITY % LanguageCode “NMTOKEN”> he () ‘Well Formed’ XML Documents » 
<! ENTITY % URI "CDATA 3 Ment is a document that conforms to the XML syntax 


(R.GP.V; June 2011) E 


A ‘Well Formed’ XML 
Jes. The following 
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«well Formed’ XML document — 
< ?xml version = «1.0727 

«note? 

«to» Rakesh «o7 

«from» Kavi </from> . 

«heading? Reminder </heading> . 

«body» This Monday we have a meeting at 1 : 00 pm </body> 

</note> 

(ii) ‘Valid’ XML Documents — A ‘Valid’ XML document is a “Well 

Formed’ XML document which conforms to the rules of a Document Type 
Definition (DTD). The following is the same document as above but with an 
added reference to a DTD — 
« ?xml version = “1.0” ? > 
«IDOCTYPE note SYSTEM “InternalNote.dtd”> 
<note> 
<to> Rakesh </to> 
<from> Kavi </from> 
<heading> Reminder </heading> 
<body> This Monday we have a meeting at 1 : 00 pm </body> 
</note> 


isa 


Q.14. What are the goals of XML ? 
Ans. There are following goals of XML as given below — 
(i) It must support for transport or storage of data. 
(ii) XML permit user to define t| i 
jdn ne the formatting rules for the user 


(ii) XML permit user to build hi i i 

——À T to build his own tag library based on his Web 

Me Ey] "ii should be able to define and use this own tag. This permits 
strict the use of the set of tags defined by proprietary vendors. 


15. Wri 
wy. Write short note on DTD. (R.GP., June 2011, Dec. 2010 


ji Or 
What 
at is DTD ? Where we can get it ? (R.GB,, June 2013) 


pua of DTD, although this extension is 
T notrequire any extension. We can spec! 
mention that for a given XML file ocument and a DTD. It means that we &?? 


» We want to use a given DTD file. Also, Y° 
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; that . 
get n pom DTD file ch to apply in that DTD file, Once this linkage i 
sgblishet » checks the contents of the XML ES 
ference to these rules automatic document with 
[2 


ally wh 
ML document. Fig. 4.3 sho: «never we attempt to make use of 


the x ws this concept, 


XML document 
„Contains data... 


apply to the data... 
Fig. 4.3 Relationship between an XML Document and a DTD File 


Working — An XML document contains a reference to a DTD file. This 
is similar to, for example, how a C program would include references to 
various header files, or a Java program would include packages. 

A DOCTYPE declaration is an XML document specifies that we want to 
include a reference to a DTD file. 

. Whenever any program (usually called as an XML parser) reads our XML 
document containing a DOCTYPE tag, it understands that we have defined a 
DTD for our XML document. Therefore, it attempts to also load and interpret 
ihe contents of the DTD file. In other words, it applies the rules specified in 
| the DTD to the contents of our XML document for verifying them. 

The DOCTYPE declaration stands for a document type declaration. 

| Conceptually, this is shown in fig. 44. 


<! DOCTYPE “a.dtd”> 


„other XML tags as usual... 


test.xml adtd 


| Fig. 4.4 Using the DOCTYPE Tag 


| The basic syntax for the DOCTYPE declaration is as follows — 
1 <! DOCTYPE root element name .....--- > 


| where, l 2d 
(i) The DOCTYPE keyword indicates that this is either an internal 


declaration of a DTD, or a reference to an external DTD. 
. Gi) Regardless of whether it is internal or external, this is followed 
| Y the name of the root element in the XML document. eee 
; Gii) This is followed by the actual contents of the rhy 
b Internal DTD), or by the name of the DTD file (in case o 


| “his is currently shown by dots (..-) 


Fe adi need DIRT e intend to write for capturing 


| t that w 
| ta Ans. Suppose an XML s to see data such as the account number, 
| account information. We would li 


| 
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tema es balance, wpe of ier etc., as the field, for y name as the only element. We also with t XML document Containing a 
er ar i eeu eet jc same time, we aj, 00^. yill define the template or rule book fi © Write à corresponding DTD, 

x nsure that this XML document does not contain any other irreley, Zr. esc iir ets meds 1 
wish E. For instance, We would like to make sure that our XML, docu ant pr can be 1DTD as book.dtd Fi aoe NA "s wot 
d à tonii information about students, books, projects, or data not n ment pd our external r Fig 46 shows Smaland cen DTD 

s. 
we embed the contents of the 
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the int 
eeded, In this figure, when a DTD is internal, 
de the XML document, as shown in 


<ACCOUNT> insi 

> 03901000649</ACC_NO> prD ; Case (a). How 

pec ea «ACC, NAME» external, then provide a reference to the DTD inside our XML ones 
T KC se (b). The actual DTD file ha L document, as 


We need something to 
prevent this! How can a 
bank account contain 
information about 
books?! 


in ca: 
shown 1n à Separate existence of its own 
Q.18. What are the limitations of DTD ? : 
Ans. DTD has a number of problems that limits its practical use — 
(i) DTD cannot constrain character data, In the contents of 
Fig. 4.5 The Need for Validating Contents of an XML Document particular element, either any character data is permitted or none at all eos 
Gi) By the same token, the attribute types are too limited, DTD 
cannot specify that the value of a particular attribute must be, for example, an 
integer, a URI, a date, or whatever datatypes we might use. i 
0.17. Discuss the various types of DTDs. (iii) Element and attribute declarations are entirely context insensitive. 
Te DiDi It means that descriptions cannot depend on attributes or element context. 
F lia N «i n types a P : S, em me and external DTD, | yowever, it is very common in the design of XML languages that certain 
SO TEER ively called internal subset and external subset. m declaration depend on whether or not. a certain attribute exists and has a 
An internal subset means that the contents of the DTD are inside an XML particular value or the current element has a particular ancestor element. 


<ACC_TYPE> Savings </ACC_TYPE> 
«OP BAL» 1000 </OP_BAL> 


«Book ip» TOY: [BOOK ID» 
</ACCOUNT> 


In short, we need easy mechanisms for validating an XML document, 
For example, we should be able to specify and validate, which elements 
attributes, etc. are allowed in an XML document. 


— em = the other m an external subset means that an XML . (iv) Character data cannot be combined with the regular expression 
ar H z H : 

eference to another file, i.e., external subset. content model. This means that if we need to permit character data in the contents, 

<?xml version=“1.0”?> then we cannot control the order of elements or their number of occurrences. 


Internal DTD E A 
definition (v). The content models lack an interleaving operator. 


the comment element in RecipeML. 
(vi) DTD provides very I 


<! DOCTYPE myBook [ For example, 


1 <!ELEMENT book name (#PCDATA)> 
> 


imited support for modularity, reuse, and 


<myBook> a. 

PM book. name»Computer Networks</book_name> < XML contents | tvolution of schemas. anu 

x . puse | (vii) The normalization features in DTD are limited. il 
here is none for element contents. 


ntation. 


is H i 
(a) Internal DTD: DTD Inside XML Document a default mechanism for attributes, "bedded structured self-docume 


(viii) DTD does not permit eml 


t contain markup. 


<?xml version-"1,9"2- n 
«! DOCT 1DTD omment t they canno! 
YPE myBook SYSTEM “myBook.dtd”> preferente (ix) ae ipod namespace’: 
<myBook> | g otation. 
<book_name>Computer N USE contents | (x) DTD does not itself use an XMLn moe 
</myBook> etworks</book_name> ag | ite an example of XML doc! 
eee -Q.19. What is DTD and schema ? Write (R.GPV, June 2012) 
“nd DTD, 
<!EL 
book name (#PCDATA) > External DTD Ans. DTD — Refer to Q.15. veto DTD. Itis supposed that -— : 
il Sch isan alternative E TDs DTDs are. easier - 
- (b) Extern , F Wi ema — A schema I5 t features of DIDS. uch 
al DTD: DTD is a Separate File Ould eventually completely replace a un However, schemas are m 
i i 


Fig. 4. | E 
8- 4.6 Internal and External DTD Examples Write and provide support for 5? e 


l 
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"ee ; ilities xtensibility. A schema d lose X an be used 
her in terms of their capabilities and extensi Ocument ; ent to enclose XML cont i anywhere wit 
ric ‘iment, just similar to a DTD. However, the syntax of a sch isa jocum TML- ent, which might work a ithin an HTML 
separate docu J ema ig H s follows — 
similar to the syntax ofan XML document. In other words, a schema document <HEAD> 
is an XML document. . <TITLE>XML Data Islands</TITLE> 
Consider, for example, an XML document which contains a greeting Message pend 
ing schema to this XML document is as shown in fig, 4, t <BODY> 
A corresponding sehe B <H1>Regular HTML Herec/H]» 
XML Document — message.xml ML ID=“tasty”> 
<?xml version =“1.0"?> ex 
«MESSAGE xmlns:xsi-"http://www.w Lorg/2000/XMLSchema-instance” <COMBOMEAL> 
xsiznoNamespaceSchemaLocation="message.xsd"> . <BURGER> 
Hello Friends! <NAME> Tasty Burger</NAME> 
</MESSAGE> <BUN BREAD=“WHITE”> 
Schema — message.xsd <MEAT /> 
<?xml yersion="1.0" 7» <CHEESE /> 
«xsd:schema xmins:xsd="http://www.w lorg/2000/XMLSchema”> <MEAT /> 
<xsd:element name=“MESSAGE” type=“xsd:string”/> </BUN> 
satasen 3 ] </BURGER> 
Fig. 4.7 Example of XML Document and Corresponding Schema <FRIES SIZE-*LARGE" > 
0.20. Define an XML schema. Show how an XML schema can be created, «DRINK SIZE-"LARGE" FLAVOR-"Cola" /> 
i </ICOMBOMEAL> 
(R.GP.V., June 2017) 
Ans. XML Schema — Refer to Q.19. - 
XML Schema Creation — : i </HTML> 
<? xml version = “1.0” 2> Under Internet Explorer 5, this markup and content will be hidden, though 
This is normal XML declaration. | itisexposed for scripting manipulation. Other browsers may ignore the <XML> 
<xsd : schema xmlns:xsd = “http://www.w3org/2001/XMLSchema”> and newly defined tags but still render onscreen content, such as the phrase 
xsd : schema denotes that this is a schema definition.xsd is the namespace “Tasty Burger”, as shown in fig. 4.8. 


prefix. It is attached with an real namespace URI http : //www.w3org/2001/ 
XMLSchema. 


<xsd : element name = “MESSAGE” type = “xsd : string”/> 


This declares that our XML document will hav: d | 
e the root element name 
MESSAGE of type string. 


</xsd : schema» 
This indicates the end of our schema document. 


W Untitled - Microsoft Internet 
i PE ETEN 

| File Edit View Go. Co! 

"Back: Forwsrd ‘Reload .Home Se 


- u$ Bookmarks d Go to; xml islandsMm 


Regular HTML Here 


Tasty Burger 


ST How XML content can be embedded into HTML document. 
(R.GBK,, Dec. 2017) 
Using suitabl. Or ' 
" suitable example, explain how XML sees 
into HTML document, ee ane p a 
Or . pa 
be embedded into HTML document ? Bier = y pe 

(R.GP.V., Nov. 2018) ! 


. How XML content can 
with suitable example. 
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5 kup onscreen, 
To avoid the rendering of ae wine YOu Could us, 
à e m 
SRC attribute for the ed i Lxml"></XML> 
«XML SRC=“combomea!. 
i ly ignore this markup. 
Older browsers will safely ig) —À 
Besides using the Mee element, you co PT> element 
to include HTML. Forexamp'e, —— = 3 
<SCRIPT LANGUAGE="XML” TYPE="text/xml"> 
<WEATHER> 
<SUNNY /> 
</WEATHER> 
</SCRIPT> . 
You could also use the SRC attribute for the <SCRIPT> element to 
reference an external XML file, like so — 
«SCRIPT SRC-^http ://www.bigcompany.com/combomeal.xml” ></SCRIPT> 
Regardless of the particular syntax, proposing to use XML inside HTML 
documents creates the expectation that XML elements will integrate into the 
HTML application environment. But how exactly should this happen? The 
previous example shows that embedding XML content in the <BODY> element 
may cause a problem. What about the <HEAD> of the document? Placing 
XML elements inside an HTML document’s <HEAD> element is consistent 
with the *XML as data" model. After all, the purpose of the head ofthe document 


is to house the document's meta-data, as illustrated by the following example- 
<HTML> 


<HEAD> 
<TITLE>Widget Wonders</TITLE> 
<XML ID=“xmlmetaone”> UU 
«DESCRIPTION» 
<AUTHOR>Thomas A. Powell</AUTHOR> 


<SUMMARY>A sample document about widgets</SUMMARY> 
<KEYWORDS> 


€ the 


<KEYWORD RANK="1>Wi dget</KEY WORD> 


<KEYWORD RANK-'25— 
<IKEYWORDS> Sample</KEYWORD> 


Mex ON muy 5, 1999</CREATION> 
dee Tiei 31, 1999</EXPIRES> 
</XML> 
</HEAD> 
<BODY> 
<HI ALIGN= 


“CEN » n 
<HR> TER”>Widget Sample Document</H1> 


<P>This is some sample text abo 
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</BODY> 


ut Widgets «jp. 


The XML code in this example wi 
you could potentially render or Manip; 


and XSL. 
Ans. The conversion from XML 
referable to deliver a native XML file a Ps aic awkward; it would be 
sheets (CSS) or a new technology called Kees wee Style 
ou should be able to deliv € Stylesheet Language 
KSL), e llowinz fe" ^ et XML documents right to the screen. 
n Es = a g a well-formed XML document representing a catalog 
<?xml version=“1.0” ?> 
<?xml-stylesheet href=“catalog.css” type=“text/css”?> 
| <CATALOG> 
<PART> 
<NAME>Super Widget</NAME> 
<DESCRIPTION> 
The Super Widget is the most powerful widget in the world. 
</DESCRIPTION> 
<PRICE>$1.95</PRICE> 
| </PART> 


| <PART> 
<NAME>Deluxe Widget</NAME> 
<DESCRIPTION> 
The Deluxe Widget is the fanciest widget in the world. 
</DESCRIPTION> 
<PRICE>$2.95</PRICE> 
| </PART> 
SÍCATALOG» - em 
The lack of flow objects in CSS makes properly displaying this ym 
‘ocument very difficult, In some sense, CSS still relies eemtyon HTN Web 
sic document structure. Because of its potential acini my d 
| “Xperts look to XSL as a possible solution. XSL, a much more vi eru il 
an CSS, is based ona style sheet technology called p $3 nne 
| nd Specification Language (DSSSL) that was used in the S = dd 
| wtunately, XSL docs not retain much of Vr geh m d of XSL is 
| i, theses notation of DSSSL. One of the mos 


i L rules that match various 
| ies e iplex pattern matching. You can write XS 


riate HTML and/or CSS 
| man of an XML file and then output the approp! icing d 


: eda 
UP to display the information. Using the previous simp! 
| 
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ing the following statement 
T an XSL file by using the 19, st E 

x could Ln a esheet href= catalog asi Pe e patlern-mat | 

The catalog.xsl file shown here € i 


les — 
rules that would output HTML and style rules 
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E hanisms is ca A ow the document 
FS i sca 
«xml version-" 1.0777 ut XSL — stylesheet language) is the relent Sy dt (CSS). 
pod f XML, an 's more sophisticated than the CSS oe e ES 
«ni «root /> XSL can be used to define how y 
<HTML> 


HEAT TLE>Parts Catalog</TITLE> 


</HEAD> " 2s 
|COLOR- "orange 
BODY EN- CENTER”>Product Catalog</H1> 
<HR> 
<children/> 
<BR/> 
</BODY> 
</HTML> 
im 
«rule» 
<target-element type= "PART" /> R 
SDN EO T obrei 50px; background: yellow” > 
«children /> 
</DIV> 
</rule> 
<rule> 
<element type=“PART”> 
<target-element type-*NAME" /> 
</element> 
<B> 
<children /> 
</B><BR/> 
</rule> 
<rule> 
<element type=“PART”> 
<target-element type-*DESCRIPTION" /> 
</element> 
<DIV STYLE-"text-indent: 20px; font-style: italic”> 
<children/> 
</DIV> 
<BR/> 
</rule> 
<rule> 


<element type- PART" 


<target-element A. m 
element ent type-"PRICE" /> 
<DIV ALIGN="RIGHT” m. 
<children/> STYLE 
</DIV><BR/> 
</rule> 
</xsl> 


color: green;”> 


i . an XML file sh : 
ransforming the XML file into a format that is PN. : beg d 
such. format is HTML. Normally XSL acco rowser. One 


XML element into an HTML element. mplishes this by transforming each 
Q.24. Write short note on XSL and XSLT. 


Ans. Extensible stylesheet language transformations (XSLT) has evolved 
from the early extensible stylesheet language (XSL) standard. XSL specifies a 
language definition for XML data presentation and data transformations. Data 
presentation means displaying data in some format and/or medium, Presentation 
js about style. Data transformation means parsing an input XML document 
into a tree of nodes, and then converting the source tree into a result tree. 

, Transformation is about data exchange. 

Because these functionalities serve two distinct purpose, XSLT was 
proposed and later accepted as a separate standard for XML data transformation 
only. XSL is now generally referred to as XSL formatting objects (XSL-FO), 

| to distinguish it from XSLT. The future of XSL-FO as a standard is uncertain, 

| because much of its functionality overlaps with that provided by cascading 

| style sheets (CSS) and the HTML tag set. If cross-vendor compatibility is 
important, you might want to avoid XSL-FO until it becomes a standard fully 
accepted by the World Wide Web Consortium. 


0.25. What is the need for XSL ? Also give the parts of XSL. 


Ans. Extensible stylesheet language (XSL) is similar to XMLas CSS is to 
HTML. In case of HTML document, tags are predefined such as table, div, 
and span; and the browser knows how to add style to them and -— kin 
‘sing CSS styles. But in case of XML document, tags are not predefined. In 
order to understand and style an XML document, World Wide Web Consin 
(Wac) developed XSL which can act as XML based eie inen : 

document specifies how a browser should render an : 

The main parts of XSL are as follows — l : 

XSLT — Used to transform XML document into various other types o 
ument, 


XPath — Used to navigate XML fenes 
XSL-FO — Used to format XML document. 


| doe 
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á isa rogramming language. 
Q.26. Explain ecd iua language for processing XML data _ tha 
Ans, XSLT a. documents. As such, it supports the following — 
is, saone Permission where Possible or Feasible — Request a lin 
. E. ^s Webmaster. Keep in mind that website owners may get severa 
with wel es every day. Make your request stand out by personalizing your 
link ae ta de the site owner’s name. Comment on something you have 
auem his website. This shows that you have actually visited the site and 
takes the time and effort to look around. a, m 
(ii) No Control Over Content of Links — Include a section of yoy, 
own which explains to your visitors that you have no control over extemal 
links. You think they might be ofinterest, but you don’t have any responsibility 
ir content. 
for their (ii) Link only to HTML and Text Style Pages — Do not link to 
multimedia files (images, sounds and videos). Linking to these types of media 
files is called bandwidth stealing and is highly unethical. 

Q.27. Write a program to displaying XML with XSLT. 

Ans. XSLT (Extensible Stylesheet Language Transformations) is the 
recommended style sheet language for XML. 

XSLT is far more sophisticated than CSS. With XSLT you can add/remove 
elements and attributes to or from the output file. You can also rearrange and 
sort elements, perform tests and make decisions about which elements to hide 
and display, and a lot more. 

XSLT uses XPath to find information in an XML document. 

<?xml version-"1.0" encoding=“UTF-8”?> 

<breakfast_menu> = 

<food> 

<name>Belgian Waffles</name> 

<price>%400</price> 


<description>Two of our famous Belgian Waffles with plenty of real map E 
syrup</description> 

<calories>650</calories> 

</food> 

<food> 


<name>Strawberry Belgian Waffles</ 

Neb eei E ~~ d 
escription>Light Belgian Waffl i ies and whipP? 

cream</description> íi ee 

<calories>900</calories> 

</food> 

<food> 


Shame>Berry-Berry Belgia 
Space 600 s arises gian Waffles</name>- 
„<description>Light Belgian waffle i rtment © 
berries and whipped cteam</descriptions 4 bigidroasph 
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f fresh 


<calories>900</calories> 
</food> 
<food> " 
<name>French Toast«/ 
<price>*300</price> Te 
«description? Thick Slices m 

«jdescription 
<calories>600</calories> 
</food> 
<food> 
<name>Homestyle Breal 
rice AT rd P a ux 
<description>Two eggs, ba 

hash browns«/déiliptiorte CON OE sausage, toast, and our ever-popular 
<calories>950</calories> 
</food> 
</breakfast_menu> 
Use XSLT to transform XML into 
Example XSLT Stylesheet: 
<?xml version="1.0” encoding="UTE-8"?> 


«html xsl:version= “1.0” xmlns:xsl-"http:// i 
a o p://www.w3.org/1999/XSL/ 


<body style=“font-family:Arial;font-size:12pt:back: - : 
| A d pt;background-color: 


<xsl:for-each select=“breakfast_menu/feed”> 
i <div style=““background-color:teal;color:white;padding:4px”> 
| <span style-"'font-weight:bold"»«xsl:value-of select=“name”/> - </span> 
| <xsl:value-of select=“price”/> 

</div> 


<div style=“margin-left:20px;margin-bottom:1em;font-size:] 0pt”> 
<p> 


<xsl:value-of select=“description”/> nes : 
<span style=“font-style:italic”> (<xsl:value-of select=“‘calories”/>calories 
| Per serving) 
</span> 
‘</p> 
</div> 
</xsi:for-each> 
“</body> 
| </html> 
| Output — 
| Belgian Waffles - €400 . 
" Two of our famous Belgian Waffles wit 
alories per serving) 
Strawberry Belgian Waffles - 3535 
Light Belgian Waffles covered with s 
tles per serving) 
Berry-Berry Belgian Waffles - «600 
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HTML, before it is displayed in a browser — 


h plenty of real maple syrup (650 


trawberries and whipped cream (90( 
| Calo; 
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Update student.xml document with the following xml-stylesheet tag. s 
- Set 


href value to students.xsl 


<?xml version = “1.0”?> M 7 
<?xml-stylesheet type = “text/xsl” href = “students.xsl”?> 


<class> 


</class> , 

View the XML Document in Internet Explorer 
students.xml 

<?xml version = 1.0777 
<?xml-stylesheet type = “text/xsl” href = “students.xsl’"?> 
<class> 

«student rollno = *100"7 
<firstneme>Vandana</firstname> 
<lastname>Rajput</lastname> 
<nickname>Dolly</nickname> 
<marks>85<marks> 

</student> 

«student rollno = *101"7 
<firstname>Aman<firstname> 
<lastname>Rajput</lastname> 
<nickname>Amnu</nickname> 
<marks>95</marks> 

</student> 

«student rollno = “102”> 
<firstname>Anju</firstname> 
<lastname>Verma</lastname> 
<nickname>Salu</nickname> 
<marks>90</marks> 

</student> 

</class> 

Output — 


è i [3 E:wsltistudents.xml 
® Getting Started E Latest Headlines ; 


Vandana | Rajput | Dolly 


EON 
ET 
pte | am S vema cae | 
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0.29. Write short note on PHP. 


Ans. Hypertext preprocessor i ; P 

patis used to es Coal ae = a side scripting language 
programmer, Rasmus Lerdorf, in the year 1995, and owed z ad fetes 
Personal Home Page. Lerdorf initially created a set of Bie Gee ay 
Interface binaries, written in C language, to replace some Perl idi pied 
homepage. He later combined these binaries with his Form Inte à (FI E 
create PHP/FI. Although, not officially, launched, this PHP/FI was the us 
version of the PHP language. PHP/FI has the capability to communicate with 
database and develop dynamic Web pages. PHP is free software launched 
under PHP License, which does not adhere to the GNU General Public License 
(GPL) norms. 


Q.30. Write features of PHP. (R.GP.V, June 2014) 
Ans. The following are some of the important features of PHP — 


(i) Access Control — Provides a built-in Web-based configuration 
screen to handle access control configuration. Depending upon the client's 
domain, browser, e-mail address, or the referring document, various restrictions 
can be placed on the Web pages, such as password protected, completely 
restricted, and logging disabled. 


(ii) File Upload Support — Allows users to upload files to a Web 
Server. PHP provides the Multipurpose Internet Mail Extensions (MIME) 
decoding process to upload the files onto à server. 


(iii) HTTP-based A uthentication Control- Allows the user to create 
mechanisms for the Web server. 


customized HTTP-based authentication 

(iv) Variables, Arrays, and Associative Arrays — Support variables, 
arrays, and associative arrays that can be passed from one Web page to another 
using either the GET or POST method forms. 


i tures similar to 
iti ents and Loops ~ Provide fea 
inrcr ari k with various conditional statements, 


the C language and allows you to wor c i 
Such as if elseif E as well as loops, such as for, foreach., while and do he 

i : sions — Support all common regular 
ed Extend pes yd mainly used for pattern. 


re eabion operations. ine expressio manipulation. 
Watching, pattern substitutions, and general string 


(R.GP.V, May 2018) 
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(vii) Raw HTTP Header Control — Allows to transfer a U 


one client to another c 
header of the Web pages. 

(viii) Access Logging — Allows us to record the number of 
bsite is accessed. In addition, it also helps to generat 
playing the access information. 


lient. It is also used to manipulate the latum 
ated 


times A 
Web page or a we a 
on every page. dis 

(ix) Safe Mode Support — Allows multiple users to run PEP ias 
on the same server simultaneously. The PHP safe mode helps to salve M 
shared-server security problem. 

(x) Open Source — Allows the user to work with different so. iian 
development languages. User can choose the desired software development 
language to create its own source code for different types of application ipa 
distribute them on the World Wide Web (www) free of cost. 


(xi) Third Party Application Support — Supports a wide range of 

different databases such as MySQL, PostgreSQL, Oracle, and Microsoft SQL 

` Server. For example, PHP 5.3 supports more than 15 database engines, and 

includes a common Application Program Interface (API) for database access. 

(xii) PHP's Extensible Architecture — Allows the user to read and 

write in various formats, like GIF, JPEG, PNG, send and receive e-mails using 

the SMTP, IMAP, and POP3 protocols. PHP also allows the user to access C 

libraries, Java classes, and Component Object Model (COM) objects as well 
as the program code written for these languages. 


0.31. What are the advantages of PHP over other scripting languages? 
List various features of PHP. (R.GBV., Nov. 2018) 
Ans. PHP offers advantages over the following scripting languages — 
Active Server Pages (ASP) — ASP is a scripting language that is suppo rd 
by only Microsoft Internet Information Server (IIS). This limits its availability 
to Win32 based servers. Whereas, PHP is supported by almost all the ies 
servers. In addition, ASP is much slower, less stable, and less secure languse? 
as compared to PHP. PHP works with Apache, which has a proven record 0 
speed, reliability, and hardened security. 
N Kis Fusion — PHP runs on almost every platform, whereas Cod bs 
He y available on Win32, Solaris, Linux, and HP/UX. In addition, P s 
used on programmers, whereas Cold Fusion is designed for T5 


programmers. PHP is a fas A age 3 
j ter, more effi stable langt 
Compared to Cold Fusion. n RT 

antag? 


Practical Extraction ^ 
of : and Report Language (Perl) — The main d 
ae Perl is that PHP was designed inr "dd for the boe "np ^ 
f esigned to do complex tasks, which makes it comp! licated. 
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sier to integrate with the HTML language th: N 
r 3 smaller learning curve as com ge than Perl. PHP is easy to le; 


rogramming languages is required to learn PH 
some knowledge of C and shell Scripting. 
ver P. les j 
Java “8 sit (ISP) - PHP is supported on any platform that is equal 
or above 32 bits, whereas JSP is supported only by those platforms that have a 
JVM. In addition, the performance of PHP is almost five times faster than JSP. 
Also refer to Q.30. 
Q.32. Explain how many types of conditional statements are used in 
PHP ? How to make decisions in PHP. 
Ans. The types of conditional statements which are used in PHP are as 
follows — 
(i) if statement 
(iii) if-elseif-else statement 
(i) if Statement — This statement always begin with if and followed 
byacondition given in parentheses. If the condition is true, then given statements 
are executed. But, when condition is found false, then no change takes place, 
| and when script is run in this condition then get a blank browser window. 


‘arn and 


P, whereas learning Perl requires 


(ii) if-else statement 
(iv) switch case statement. 


Syntax — 
Statement 
| if Statement 
Tres if Statement 
False 
| Fig. 4.10 
Example — 
< 2php 
$a=1; 
if ($a == 1) 
print ‘$ a is equal to 1’; 
2> 


pared to Perl. No prior knowledge of | 


188 Internet and Web Technology 


Output — 
$a is equal to 1 


(ii) if-else Statement — This statement is used to make two type 
of decisions, such as true and false, based on the condition. Whe 2 


f n the 
condition is true, the if statement is executed otherwise else statement is 
executed. 

Syntax — 


if (condition) 


Statement 1 


} 
else 
Statement 2 
} 
Example — 
<?php 
$x = 53; 
$y = 24; 
if ($x > $y) 
( 
echo “x is greater than y"; 
} 
else 
{ 
echo “x is not greater than y”; 
) 
> 
Output — 


x is greater than y. 


In case the condition is true, the block of statement executes 
displaying message, x is greater than y. But if the condition is false, 
then the control transfers to the else block. In this case, the block of 
code inside the else block is executed, displaying the massage, X is nof 
greater than y. 


(iii) if-elseif-else Statement — In this statement, if-elseif-elst 


Statement combination is evaluated in a sequence. The elseif condition is checke 


Be ie a 
. when the condition within the if statement is false and elseif statements 4° 
executed if the condition is true, 
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Syntax — 
if (condition 1) 
statement ] 


elseif (condition 2) 


{ 
statement 2 
ds 
elseif (condition n 1) 
{ 


statement n 1 


else (statement n) 
Example — 


<?php 
$result = 80; 
if ($result > = 85) 


echo “Passed — > Grade A <br/>”; 
a ($result > = 70) 
i echo “Passed — Grade B <br/>”; 
elseif ($result > = 55) 


echo “Passed —> Grade C <br/>”; 
} 


else 

{ 

echo “Failed <br/>”; 
} 


2» 
Output — 


Passed — Grade B sae 
T i igned to the $ result variable. The parser checks the 
he a up ee ks. If the condition is true, then the 


Condition stated in the if and elseif bloc! 
associated block of statement is executed, and the message Passed —> Grade 
1s displayed. 
(iv) switch Statement — This statement allows a program to evaluate 
à condition and match the condition's value to the statements. If a match is 


Ound, the program executes the associated statement. 


| 
| 


190 Internet and Web Technology 


Syntax — M 
switch (condition) 


f 


and found TRUE. The value of thi 
peginning of the loop, so even if thi 


case label 1: nested statements, execution do 


statements 1 sometimes, if the while condition is evaluated and fou 
ound FALSE from the 


break; very beginning, the statements are not execute 
Syntax — ed. 


case label 2: 
statements 2 


while (condition) 


break; 
default: n vd 
statements n i 
break; Script — 
) <?php 
— ar 
ample — hile ($i <= 
php’ while ($i <= 10) 
$flower = “lily”; echo “The number is “$i.” x 
switch (Sflower) $i. uiui. 
{ case "lotus" : } 
echo $flower. "costs $ 3.50"; > 
break; Output — 
case “daisy” : The number is 5 
echo $flower."costs $ 2.50”; The number is 6 
break; m number is 7 
case “lily” : e number is 8 
m " The number is 9 
es Sflower: costs $ 1.20"; The number is 10 
default : i : The while condition evaluates whether $i is less than or equal to 10. 
echo “There is no such flower in our shop”; (i) do-while Loop — The do-while loops always executes the block 
) break; i Srsitemens at least once and then checks the condition, and repeats the loop 
i | the condition is true. 
echo "no match is found"; Syntax — 
> : do 
Output - lily cost $1.20 aui 
T dis atement; 
_ The Sflower variable is assigned a value, lily, and then the switch condition 
donne with the case value given in the switch block. If the case A while (condition); 
es with the switch condition, then the control flow is transferred to t Script — 
ken SESTO The statement within the case block is executed and the <?php 
massage, is displayed as output. E $i=2; 
0.33. Explain the while loop and do-while loop with example. a 
Ans. (i) while Loop In PHP, while loops are the simplest type of loops, SiH; br"; 


Itexecutes the statements repeatedly, as long as the while condition is evaluate 


echo “The number is”.$i 
while ($ i <=); 
T> 


192 Internet and Web Technology 


Output — 
The number is 3 
The number is 4 
The number is 5 
The number is 6 
The number is 7 
The value 2 is assigned to the $i variable. The value of i is incremented by 
1 each time the loop runs. If the value of i is already greater than 6, then loop 
exits. If Si is not greater than 6, the statement in the braces executes and the 
loop returns to the do-while statement. 


Q.34. Write short notes on PHP and HTML. 
Ans. PHP — Refer to Q.29 and Q.31. 
HTML - Refer to Q.1 (Unit-II). 


Q.35. Discuss arrays and its types in PHP. 


Ans. We know that a variable is a storage area holding numbers and text. 
The problem is that a variable can hold only one value at a time while an array 
is a special variable, which can hold more than one value at a time. An array 
can hold all variable values under a single name. We can access the values of 
an array by referring to the array name. 

Creating an Empty Array — In PHP, creating an array is a simple task. 
An array( ) construct is used in PHP to create an array, In empty array, no 
index or values. The syntax of empty array is — 


<?php 
Sarray = array( ); // create an empty array 
> 


We have created a variable named Sarray, which is an empty array using 
an ray() construct. PHP provides a is_array() function to check if a variable 
1S an array or not. Theis array() function takes a variable as its only argument 


and returns a Boolean TRUE if the variable is an array the else it returns 
FALSE. Checking the Sarray variable — 


<?php 
Sarray = array( ); 


4 (is array (Sarray)) // create an empty array 


//check if Sarray is an array 


echo "variable is an array"; ) // if it is an array 


else { 


echo "variable is not an array";} // if it is not an array 
2s ] 


: XML & PHP. 193 
Output — Variable is an array, 
Types of Array = The types of arrays in PHP are as follows — 

© i eme ie ~ To identify each item of the array, 
s use integer values as their j á 
array’ ee index number, Syntax are 
Scolors = array Cred', ‘blue’, « 
print_r ($colors); , 
95e 
Output — Array [0] => red [1] => blue [2] 
The index number for red, blue and green a 
are numeric values. 
(ii) Associative Arrays — We can associativi 
element in PHP using => symbol. 
There are two ways to define associative array — 
(a) First Way — 
$salary = array (“Jai” => "35000", “Aman” => “45000”, 
“Salu” = '*50000"); 
(b) Second Way - 
$salary [“Jai”] = *35000"; 
$salary ['Aman"] = “45000”; 
$salary [“Salu”] = “50000”; 


numeric 
green’); 


=> green) 
re 0,1, 2 respectively, which 


e name with each array 


Example — 
<? 


$salary=array(“Jai”=>“35000”,“Aman”=>“45000”,“Salu”=> *50000"); 
echo “Jai salary:“.$salary[“Jai”].” 


echo “Aman salary : “.$salary[“Aman”].” 
echo “Salu salary : “.$salary[“Salu”].” 


ps 

Output : 

Jai salary : 35000 

Aman salary : 45000 

Salu salary : 50000 

Example — 

<? 

Ssalary ['Jai"] = “35000"; 
Scalia, rl - “45000 $ 
$salary [“Salu”] = “50000”; 
echo “Jai salary:“.$salary[“Jai ]. 


echo “Aman salary: ".Ssalary[ "Aman 1. 


> 
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echo “Salu salary: * $salary[“Salu].” 


” 
> 


7 
Output : 
Jai salary : 35000 
Aman salary : 45000 
Salu salary : 50000 
(üi) Multidimensional Array — PHP multidimensional array is also 
known as array of array. It allows store tabular data in an array, PHp 
multidimensional array can be represented in the form of matrix which is 
represented row*column. 
Example 
<?php 
Semp = array 
ai “Jai”, 40000), 
array(2, “Aman”, 50000), 
array(3, “Salu”, 30000) 
); 
for ($row = 0; $row < 3; $row++) { 
for ($col = 0; $col < 3; $col++) { 
echo $emp[$row][$col]. * ”; 
} 


} 


> 
Output : 
Jai 40000 
Aman 50000 
Salu 30000 
2.36. How to print the element of an array using the print_r() function? 
Ans. We have not specified any keys. If no key is specified, PHP 
automatically assigns a numeric value to the key, thus creating a numeric 
array. The count of the index begins at zero (0). 
<?php 
// Create an array with some element 
Scars = array (Maruti, ‘Spark’, ‘Lio’, *Safari") 
// Print the array contents 
Print r ($car); 
> 


Output — Array ([0] => Maruti [1] => Spark [2] => Lio [3] => Safar) 
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Q.37. List some of the functions in PHP used to read a file. Also write 
eir syntax. 

Ans. The functions used to read a fil 

(i) The fgets( ) function 

(ii) The fread( ) function 

(iii) The file( ) function 

(iv) The file_get_contents( ) function 

(v) The readfile( ) function 

(vi) The fgetc( ) function 

(vii) The fwrite( ) function 

(i) The fgets( ) Function — The handle parameter refers to the 


variable that holds the reference of the file and length refers to the size of data 
that is extracted at a time. 


Syntax — Syntax of the fgets( ) function is — 
fgets (handle, length) 

(ii) The fread( ) Function — The handle parameter refers to the 
variable that holds the reference of the file and length refers to the size of data 
that is extracted at a time. The length parameter is not mandatory to use. 

Syntax — Syntax of the fread( ) function is — 
fread (handle, length) 


(iii) The file( ) Function — The filename is a parameter that refers 
to the name of the file. 


Syntax — Syntax of the file( ) function is — 
file (filename) 
(iv) The file get contents( ) Function — This function is refer to 
the name of the file that we want to read. 
Syntax — Syntax of the file get contents( ) function is — 
file get contents (filename) 
(v) The readfile( ) Function — This function is refer to the name of 
the file that you want to read. 
Syntax — Syntax of the readfile( ) function is — 
readfile (filename) 
(vi) The fgetc() Function — This function is refer to the name of 
the file that you want to read. 
Syntax — Syntax of the fgetc( ) function is — 
fgetc (filename) . i 
; (vii) The fwrite( ) Function — This function is used to write content 
"an already opened file. . 
Syntax — Syntax of the fwrite( ) function is — 
fwrite (filename/handle, string, length) 


th 
e in PHP are as follows — 


ind Web Technology 
browser control and detection in PHP ? 
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Q.38. How to Mn DC NM 

Ans. In PHP, the get browser( ) function is an inbuilt function 
used to tell the user about browser s capabilities. The get browser) function 
looks up the user's browscap.ini file and returns the capabilities of the User's 
browser. The user_agent and the return_array are passed as parameters tg the 
get browser( ) function and it returns an object or an array with information 
about the user’s browser on success, or FALSE on failure. 


Which is 


Syntax — 
get_browser (User_agent, return_array) 
Parameters — In this function two parameters are used. 


(i user_agent — It is an optional parameter which specifies the 
name of an HTTP user agent. By default, it’s value is SHTTP USER AGENT. 
(ii) return array — It is an optional parameter which returns an 
array instead of an object if it is set to True. 
Return Value — It returns an object or an array with information about 
the user’s browser on success, or FALSE on failure. 
Exceptions — 

(i) The user_agent parameter can be bypassed with a NULL value. 

Gi) The cookies value simply means that the browser itself is capable 
of accepting cookies and does not mean the user has enabled the browser to 
accept cookies or not. 

(iii) In order for this function to work the browscap configuration 
setting in php.ini must point to the correct location of the browscap. ini file on 
your system, 

Example — Show program of get browser( ) — 

<?php 

echo $_ SERVER [‘HTTP_USER_AGENT’]; 

//using get_browser( ) to display capabilities of the user browser 


Smybrowser = get browser( ); 
print r ($mybrowser); 
> 


Output — 
[parent] => IE 6.0 
[platform] => WinXP 
[netclr] => 1 
[browser] => IE 
[version] => 6 
[majorver] — 6 
[minorver] — 0 
=> 2 
[frames] => 1 
[iframes] =>] 
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Q.39. Define string in PHP. 


Ans. Strings are à sequence of characters that are always internally NULL 
reminated. String variables hold characters, Usually a set of characters such 
3s” Aman”, PHP is a favorite language” and so on. Strings can be as 
short or as long as desired. There is no limit to size. 


Q.40. Explain form processing in PHP. 


Ans. A form is displayed in a pre-defined area of an HTML document. 
This area would contain text, which acts as a prompt adjacent to text boxes to 
fill in with information. 

There are HTML tags which spawn, define and label text-entry boxes, 
check boxes, radio buttons, drop-down menus and so on to create on-screen 
forms, for collecting information from a user. 


Forms are an excellent way of collecting and processing information 


` from people visiting a website, thus allowing them to interact with the site. 


Forms are generally used for — 


User registration Logging in users 
Receiving feedback Online shopping 
Online catalogs Surveys 


Request for information | Conferencing 


The Main <FORM> Tag - The «FORM» </FORM> tags indicate the 
boundaries of a form on the HTML page. <FORM> indicates where the form 
starts and </FORM> indicates where the form ends. All other form elements 
must be enclosed between <FORM> </FORM> tags. 


Syntax — 
<FORM NAME = “<Formname>” ACTION = " «server 
side program name?" METHOD = 


“<GET or POST»? 


Attributes Passed within the <FORM> Tag are — ; - 
i NAME attribute uniquely 
; (i) NAME ~ The value passed to the unique 
identifies A form so that it may be referenced by style sheets or client side 
JavaScript, 
(ii) ACTION - The value passed to the ACT Hiep. xd 
name of t ide program which will process the data capture: 
the form m pene is returned to the web server by the browser. 
The value passed to the ACTION attribute can either be just the program name 
M specify a URL which points to where the program is located on the 
Wi 


server, 
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(iii) METHOD — The value passed to the METHOD attribute defines 
exactly how the data captured by the form must be sent back from the browser 
to the web server. 

There are two possible values accepted by the METHOD attribute — 

(a) GET — This method, the browser’s processing agent 
encodes the data captured by the form into a URL. 

(b) POST - This method, the browser's processing agent 
returns the data captured by the form to a web server using a data Stream, 
There is no limit to the amount of data that can be sent by the browser to a 
web server using a data stream. 

POST is preferred over GET for returning form data from a browser to 
a web server, sefely and privately. 

Q.41. Explain various functions related to files in PHP. 

Ans. PHP has many function which handle files and directories. Here we 
discuss just a few which you can use to open files, read files, save data to 
them. The functions related to files given below — 

(i) Opening a File — The PHP fopen( ) function is used to open a 
file, it requires two arguments stating first the file name and then made in 
which to operate. 

(ii) Reading a File — Once a file is opened using fopen( ) function, 
it can be read with a function called fread( ). This function requires two 
arguments. These must be the file pointer and the length of the file expressed 
in fbytes. 

(iii) Writing a File— A new file can be written or text can be appended 
to an existing file using the PHP fwrite( ) function. This function requires two 
arguments specifying a file pointer and the string of data that is to be written. 

(iv) Closing a File — After making a changes to the appended file, it 
is important to close it with the fclose( ) function. This function requires a file 


pointer as its argument and then returns true when the closure succeeds or 
false if it fails. 


Q.42. Write a program using fread( ) function in PHP. 
Ans. <html> 

<head> 

<title>Reading file using PHP</title> 

</head> 

<body> 

<?php 


0.43. Write a program using fwrite( ), fclose( ), fopen( ) files function. 
Ans. <?php 
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$filename = "tmp.txt". 


$file = fopen (Sfilename, AP 
if ($file = = false) { 

echo (“Error in Opening file”); 
exit( ); 

} 

$filesize= filesize(Sfilename); 
$filetext = fread ($file, $filesize); 
fclose(Sfile); 

echo (“File size : $filesize bytes"); 
echo (“<pre>$filetext</pre>”); 
T 

</body> 

</html> 


$filename = “/home/user/guest/newfile.txt”; 
$file = fopen($filename, *w"); 
if($file = = false) { 

echo (“Error in opening new file”); 
exit( ); 

} 

fwrite($file, “This is a simple test\n”); 
fclose($file); 

Ce 

<html> 

<head> 

<title>Writing a file using PHP</title> 
</head> 

<body> 

<?php 

$filename = “newfile.txt”; 

$file = fopen(Sfilename, “r”); 

if($file = = false) { 
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echo (“Error in opening file"); 
exit( ); 

} 

$filesize = filesize($filename); 
$filetext = fread($file, $filesize); 
fclose(Sfile); 

echo(“File size : Sfilesize bytes"); 
echo ("Sfiletext"); 

echo(“file name: $filename”); 

> 

</body> 

</html> 
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“ADVANCE FEATURES — COOKIES AND SESSIONS, OBJECT 
ORIENTED PROGRAMMING WITH PHP - 


Q.44. What is cookie ? How it is create and read. 


Ans. A cookie is a small bit of information stored on a computer of a 
user by request from a web page. This information is constantly passed 
between the web browser and web server, the browser sends the current 
cookie as a request to the server and the server sends updated data back to 
the user as response. The size of a cookie depends on a browser but in 
general should not exceed 1024 bytes. Cookies are employed to store data in 
the remote browser and help to track or identify data returned to users on 


the web browser. 


Create a Cookie — Setcookie( ) function is used to create a cookie. This 
function takes number of arguments, like name value, expiration date, and 


domain name. 


Example — 
<? php 
setcookie (*username', ‘Aman’, time( ) + 3600); 
echo "Cookies has been set"; 
> 


Output — Cookies has been set. 


Read a Cookie — The PHP $ COOKIE variable is used to retrieve ? 


cookie value. 
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Example — 
<? php 
setcookie (username’, ‘Am; 


echo *Username-".$ COO 
> F 


an’, time( ) + 3600); 
KIE [*username"]; 


Output — Username = Aman 


Q.45. What is session ? How it is starting, 


0.45. adding value, and reading a 
sesssion < 


Ans. For every user which accessing a web site, a session stores various 
information. Client-side cookies and server-side cookies are the contain of the 
session, where the client-side cookie contains a reference to the requested 
data on the server. If registered session variables and their values are stored, a 
session generates a file in a temporary directory on the server. This data is 
available to all the web pages of the web site when the user is accessing the 
specified web site. 

Starting and Adding a Session — An associative array known as 
$ SESSION[ ] stores session variables. These variables may be accessed 
during the entire lifetime ofa session. A PHP session is simply began by making 
a call to the session start( ) function. This function first checks whether the 
specified session has already been started. 

Example — 

<? php 

session_start( ); 

$_SESSION[‘firstname’] = “Aman”; 

$ SESSION['lastname"] = “Rajput”; 

7?» . 
Reading a Session — After saved the session data, it becomes s a in 

the $ SESSION[ ] along with the key of the variable name we gave t. 
Example — 
<? php 
Session start( ); 2 
S SESSION[ firstname’] = "Amar; 
$ SESSION['lastname"] = “Rajput ; à n»n 
La 2 4 2 « $ SESSION[(lastname’].”.”; 

echo “my name is “.$_SESSION[ firstname ^ — [| reading a session 


> 


Output — My name is Aman Rajput. 
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Q.46. Explain object oriented programming in PHP. 


Ans. PHP is a server-side scripting language, mainly used for Web 
development but also used as a general purpose programming language, Object. 
oriented programming (PHP OOP), is a type of programming language Principle 
added to php, that helps in building complex, reusable web applications, 


The object oriented concepts in PHP are given as follows — 


(i) Class — This is a programmer defined data type, which includes 
local functions as well as local data. You can think ofa class asa template for 
making many instances of the same kind of object. 


(ii) Object — An individual instance of the data structure defined by 
a class. We define a class once and then make many objects that belong to it, 
Objects are also known as instance. 


(iii) Inheritance — When a class is defined by inheriting existing 
function of a parent class then it is called inheritance. Here child class will 
inherit all or few member functions and variables of a parent class. 


(iv) Polymorphism — This is an object oriented concept where same 
function can be used different purposes. 


(v) Overloading — A type of polymorphism in which some or all of 
operators have different implementations depending on the types of their 
arguments. Similarly functions can also be overloaded with different 
implementation. 


PHP AND MYSQL 


PHP AND MYSQL — BASIC COMMANDS WITH PHP Exam Ex. 
CONNECTION TO SERVER, CREATING DATABASE 
= SELECTING A DATABASE ` 


Q.1. Explain how database is integrated using PHP and MySql. 


Ans. MySql is a relational database management system (RDBMS) used 
by the world’s largest and fastest-growing organizations. The MySql database 
is owned, developed, and supported by Sun Microsystems, one of the world’s 
largest contributors to open source software. 


PHP is used to create dynamic web pages. The dynamic content 
does not always require a database; however, in most cases there is need 
of a database. The most widely used database in PHP is MySql. To access 
the MySql database server, you need to check its configuration. 


Checking Configuration — While accessing a database we can avoid 
problems, such as connectivity errors, by checking the configuration of MySql 
database server. 


We can run the following code to check the configuration of MySql in 
PHP— 
<?php 
phpinfo( ); 
?> 
If you run the preceding code on the web browser, the output appears, as 
Shown in fig. 5.1. 
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lows NT MARS 5.2 build 3790 "um 
jar 2009 20:01:54 a 


Indlogo configure Js *- enable-snapshot build" “-enable-debug-pack’ ^-with- 
ESCUPotemplalesd ohp-sdienap. 5. ZvcEbó6ternplat ^ with-php-bulldzd Xohp- 
.£ixX8Gtphp, bulig "--wilh- pdo-oct-D'php-sdHaracleunstantclientt 0 
ociG- D'php-sdHoracleunstantclienti DtsdK shared" enable- 


Fig. 5.1 Configuration of the System 


When we scroll down the web page, the configuration of the MySql 


appears, as shown in fig. 5.2. 


Fig. 5.2 MySql Configuration in PHP 


If we do not find the MySql section in the list of configurations, 


cannot access MySql using the current configuration. 


(i) Hostname 
(ii) Database username 
(iii) Password 
We can establish connection with th 
e MySql i 
uu. Sql database server in PHP as 
<?php 
mysq!_connect(“hostname”, “username” 
(mysql_error ( )); 
echo “connection to the server was successful!"; 
> 


“password”) or die 


This code displays the text, connection to server was successfull, if the 
connection with MySql is established successfully else it displays the 
corresponding error. The Mysql error( ) function is used to display the MySql 
errors. 

Q.3. How to create a database in the database server ? 

Ans. MySql database server provides a function mysql query( ) which is 
used to execute the query in MySql database server. The $query variable holds 
the query to create a database, my database. 

The $query variable is passed to the mysql query( ) function to execute 
the query. 

This code create a database in the database server as follows — 

<?php 

mysql connect (“hostname”, "username", “password”) or die (mysql error(); 

echo “Connection to the server was successful !<br/>”; 

Squery = "CREATE DATABASE mydatabase”; 

mysql_query ($query) or die (mysql. error ( )); 

echo “Database created”, 

mysql close( ); 

> 

After the query is execute 
the mysql_close( ) function is use 


cuted, the connection to the database must be closed. 


d to close the connection. 
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Q.4. How to select a database from MySql database server ? 


Ans. MySql database server provides a function mysql select db( ) to 
select a database. 


The code to select a database is as follows — 

<?php 

mysql connect (“hostname”, “username”, “password”) or die (mysql_error 0): 
echo “Connection to the server was successful!<br/>”; 

$dbase_name= “mydatabase”; 

mysql select db ($dbase_name) or die (mysql_error ()); 

echo “Database is selected”; 

/Icode for queries runs here 

mysql_close( ); 

> 


Here, the mysql connect( ) function establishes connection with the 
database server. Next, the $dbase name variable is passed to the 
mysql select db( ) function to select the database. If the database selection is 
successful, the echo statement prints the message, Database is selected else it 
prints the corresponding error message. The code to execute a query is placed 


after selecting the database. Finally, the mysql close( ) function is used to 
close the database connection. 


Q.5. What are the various categories of SQL statements ? 
Ans. SQL statements can be categorized as follows — 


() Data Definition Language (DDL) — These statements are used 


fo create, delete and modify databases and tables. DDL also defines the structure 
of a database and its tables. 


(i) Data Manipulation Language (DML) — These statements are 
used to add, delete, and retrieve records from a database table, and join tables 


together using common fields. DML allows you to alter and extract data from 
a database table. 


(iii) Data Control Language (DCL) — These statements allow you 
.to grant or deny user privileges, assign roles, change passwords, view 
permissions, and create sets of rules to protect access to data. DCL also 
Specifies access levels and security privileges for a database. 
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Syntax — 
CREATE TABLE table name 
( 
attribute namel data type, 
attribute name2 data type, 
attribute name3 data type, 


Example — Example shows how to insert data in a table — 
CREATE TABLE Employee Information 
( 
Emp ID integer NOT NULL, 
Emp Name varchar (40) NOT NULL, 
Emp Address varchar (80) NOT NULL, 
Emp PhoneNumber varchar(15) NOT NULL, 
PRIMARY KEY (Emp ID) 
) 


Q.7. How to create a table in PHP and MySql ? Also explain list of 


datatypes used in MySql. 


Ans. In creating a table, the database is established using the 
Nysql_connect( ) function, and database is selected using the mysql select. db( 
function. The query to create a table is stored in the $query variable and 
executed using the’ mysql query( ) function. If the query is executed 
Successfully, the echo statement prints a message, Table successfully created 


else it prints the corresponding error message. 
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Creating a Table — 
<?php , 
$hostname=“hostname ; 
Suser-"username"; 
Spassword-"password"; 
Sdatabase-"' database"; l 
mysql_connect ($hostname, $user, Soon s 
mysql select db ($database) or die ( Unable to select database"); 


Squery-"CREATE TABLE Employee Information 


— integer NOT NULL, 

Emp Name varchar (40) NOT NULL, 

Emp Address varchar (80) NOT NULL, 

Emp PhoneNumber varchar (15) NOT NULL, 
PRIMARY KEY (EMP ID) 

D 

mysql_query ($query) or die (mysql_error ( )); 
echo “Table successfully created”; 
mysql_close( ); 

?> 


Lists of Databases Used in MySql — 
Table 5.1 List of Datatypes in MySql 


Specifies a fixed range from 0 to 255 characters long 

Specifies a variable range from 0 to 255 characters long 
Specifies a string with a maximum length of 255 characters 
Specifies a string with a maximum length of 65535 characters 
Specifies a string with a maximum length of 65535 characters 
Specifies a string with a maximum length of 16777215 characters 
Specifies a string with a maximum length of 16777215 characters 
Specifies a string with a maximum length of 4294967295 characters 
Specifies a binary string with a maximum length of 4294967295 
characters 

— 128 to 127 normal, 0 to 255 UNSIGNED 

— 32768 to 32767 normal, 0 to 65535 UNSIGNED 

— 8388608 to 8388607 normal, 0 to 16777215 UNSIGNED 5 
— 2147483648 to 2147483647 normal, 0 to 429496729 
UNSIGNED : 

— 9223372036854775808 to 9223372036854775807 normal, 0 t0 
18446744073709551615 UNSIGNED 


MEDIUMTEXT 
MEDIUMBLOB 
LONGTEXT 

LONGBLOB 


TINYINT( ) 
SMALLINT( ) 
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Specifies a small number with i i 
i a floating decimal point 
voee a large number with a floating decimal polit 
peci esa DOUBLE stored asa string, allowing fora fixed decimal point 
Specifies the date in YYYY-MM-DD format 
Specifies the date in YYYY-MM-DD HH:MM:SS format 


Specifies the date in YYYYMMDDHHMMSS format 
Specifies the time in HH:MM:SS format 


Q.8. Explain how to insert data in a table of database server. 


Ans. In PHP, if once a table is created in the database, we can insert data 
in it. 
Syntax which is used to insert data in a table as given below — 


Syntax — 
INSERT INTO table name (fieldl, field2 ..... fieldN) 
VALUES 
(valuel, value2, .....valueN) 
Example — 


INSERT INTO Employee Information (Emp ID, Emp Name, 
Emp Address, Emp PhoneNumber) 


VALUES (100, *Aman', *145 Morar Rd', 882700173) 


While providing the values for the attributes, the values for the attributes 
with text type data types such as VARCHAR( ), CHAR( ), or TINYTEXT 
should be placed with single quotes. 


Inserting Data in a Table — 

<?php 

mysql connect (“localhost”, “root”) or die (mysql error( )); 

mysql select db (“database”); 

$query = “INSERT INTO Employee Information (Emp ID, Emp Name, 

Emp Address, Emp PhoneNumber) 

VALUES (‘100’, ‘Aman’, *145 Morar Rd’, :882700173")"; 

mysql_query ($query) or die (mysql error ( )); 

echo “Data successfully inserted"; 

mysql_close( ); 

?> 

First statement establishes a connection with the database server. Next, 
the corresponding database is selected using the mysql_select_db( ) function. 


Web Technology 


The query to insert data is stored in the Squery variable and executed by usi 
i query( ) function. If the query 18 executed successfully, the eq 
teint prints the message, data successfully inserted else it prints t 


corresponding error message. 
various queries to alter the structure of a table, 

sting table can be altered using SQL queries 
hange the name of a column using the alter 
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0.9. Explain the 
Ans. The structure of an exi 
We can drop, add, modify and c 
table query. 


The queries to alt 
(i) Adding a Column — It is used to add new column in a table, 


Syntax — alter tableTable Name add column Column Name datatype 
Example—alter table Employee Information add column Emp Phone Number 


Varchar (10) 
(ii) Dropping a Column — This is used to delete an entire column. 


Syntax — alter table Table Name drop column Column Name. 
Example —alter table Employee Information drop column Emp PhoneNumber 
(iii) Changing a Column — This is used to change the column name. 
Syntax — alter table Table Name change Old Column Name 
New Column Name datatype of new column. 
Example- alter table Employee Information change Emp PhoneNumber 
Emp Phone Number varchar (10) 
(iv) Modifying a Column — This is used to update/modifying a column. 
Syntax — alter table Table Name modify Column Name New Datatype 


Example alter table Employee Information modify Emp Phone Number 
varchar (20). 


er the structure of a table are as follows — 


Q.10. Create a table in database and explain how to alter the structure 
of a table ? 


Ans. Create a Table in Database — Refer to Q.6. 
Altering the Structure of a Table — This structure of an existing table 


can be altered using SQL queries. We can drop, add, modify and change the 


name of a column using the alter table query. 
The code to alter the structure of a table is as follows — 
<?php 


mysql connect (“hostname”, “username”, “password”) or dit 
(mysql_error ( )); : 


, mysql select db ("database") or die (mysql_error ( )); 
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$query=“alter table Employee Information change Emp PhoneNumber 
Emp. Phone Number varchar (10); i 

mysql_query ($query) or die (mysql error ( )); 

echo “Column name changed"; 

mysql_close ( ); 

2» 

In this code the name of the column Emp PhoneNumber is changed to 
Emp Phone Number. 

First statement establishes a connection with the database server using 
the mysql_connect ( ) function. Next, the corresponding database is selected 
using the mysql. select db( ) function. The query to alter the table is stored in 


| the $query variable and executed by using mysql query ( ) function. If the 


query is executed successfully, the echo statement prints the message, Column 
name changed else it generated error message. 

Q.11. How to deleting data from a table ? Explain with example. 

Ans. In database server, the first statement establishes a connection with 
the database server. The next step, the database is selected using the 
mysql. select db() function. The query to retrieve data is passed in the 
mysql_query () function and the retrieved data is stored in the $ data variable. 
The data stored in the $data variable is converted into an array using the 
mysql fetch array ( ) function. The array generated by the mysql fetch array ( ) 
function to stored in the Sinfo variable. This code to deleting data from a table 
as follows — 

<? php 

mysql_connect (“hostname”, “username”, “password”) or die 
(mysql error( )); 

mysql select db(*database") or die(mysql_error( )); 

$data = mysql query (SELECT * FROM Employee. Information") 

or die(mysql error ( )); 

print “<table border cellpadding=3>”; 

while ($info = mysql fetch array ($data)) 

{ 

print “<tr>”; " 

print “<th>Emp ID:</th> <td>”. Sinfo Emp ID'] , “</td>”; — 

print “<th>Name:</th> <td>”. $info[‘Emp_Name’]. "futt P 

print "th Address:c/th»«td»".Sinfo['Emp Address"]. f <itd><tr>" A 

print «<th>Phone Number:«/th»«td»".Sinfo['Emp Phone Number }.“</ 


td><tr>”; 
} 
print “</table>”; 
mysql close( ); 
> 
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he array stored in the Sinfo variable is displayed on the web page "M 
Thea 


the while loop. 


The output is displayed in the HTML format on the web page. 


Fig. 5.3 Data Retrieved from a Table 


The mysql fetch array( ) function retrieves a row in an associative array or a 
numeric array or both. It returns an array that corresponds to the fetched row and 
returns false, if there are no rows. The mysql fetch array( ) function is an extended 
version of the mysql fetch row( ) function, which returns a row as a numeric 
array. It also stores the data in associative indices, using the field names as keys. A | 
disadvantage of the mysql fetch array( ) function over the mysql fetch row( ) 
function is that it is slower than the mysql fetch row( )function. Another function, 
mysql fetch assoc( ) is used to return data only as an associative array. 


Q.12. What is phpMyAdmin ? Also write its features. 


Ans. phpMyAdmin is one of the most popular applications for MySql | 


database management. It is a free tool written in PHP. Through this software 
we can create, alter, drop, delete, import and export MySql database tables. 
we can run MySql queries, optimize, repair and check tables, change collation 
and execute other database management commands. 


The main phpMyAdmin features are as follows — 
(i) Intuitive web interface 
(ii) Support for most MySql features — 
(a) browse and drop databases, tables, views, fields and indexes 


(b) create, copy, drop, rename and alter databases, tables, fields 
and indexes 
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(c) maintenance server, dat 


1 tabases and tables, with proposals on 
server configuration 


(d) execute, edit and bookmark any SQL-statement, even batch- 


queries 
(e) manage stored procedures and triggers 
(iii) Import data from CSV and SQL 


(iv) Export data to various formats — CSV, SQL, XML, PDF, ISO/ 
IEC 26300 — OpenDocument Text and Spreadsheet, Word 


(v) Creating complex queries using Query-by-example (QBE) 
(vi) Searching globally in a database or a Subset of it 


(vii) Transforming stored data into any format using a set of 
predefined functions, like displaying BLOB-data as image or download- 
link 


Q.13. How can be created new table in phpMyAdmin ? 


Ans. To create new tables inside a database, first open the phpMyAdmin 
tool, click on the databases tab and click on the name of the desired 
database. 


Et Sari caret coc 
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phpMyAdmin 
$9.24 


Databases 


Fig. 5.4 Create New Table Inside Database 


On the new page that opens we will see a list of all the current tables 
inside the database and a section named Create table. In that section, in the 
Name field you should input the desired new name ofthe table and then select 
the number of columns that the table should have via the Number of column: 
drop-down. When ready, click the Go button to create the table. 
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Create Table 


Number of Columns 


Fig. 5.5 Create Table 
On the next page you can configure the structure of the columns in the 
new table. The different fields there are — 

+ Name - The name of the column; 

e  Type- The type of the data, which will be stored in the corresponding 
column. More details about the possible choices can be found in the 
official MySql Data Types documentation; 

«  Length/Values — The length of the field; 

+ Default — With this option you can specify if the fields in the column 
would have a default value. This is useful for example if you want to have 
timestamps for the entries in each row; 

» Collation — The data collation for each of the fields; 

+ Attributes — Assign any special attributes to the fields; 

+ Null — Define whether the field value can be NULL. More about the 
NULL value can be found in the MySql documentation; 

e Index - Set the Index of the row. More information about the MySql 
column indexes can be found in the MySql documentation; 

+ A I - Short for Auto Increment. If this option is enabled then the values 
in the fields of the column will be auto incremented; 


+ Comments — Here we can add comments, which will be included in the 
database SQL code. 


Fig. 5.6 Configured the Different Columns 
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hould specify the Collation 
rop-downs. 
When we are ready, click the Save button to create the new table. 


After we configured the different columns, we s 
and Engine of the new table via their respective d; 


Q.14. How to add content in a database table in phpMyAdmin ? 


Ans. To add records inside a database table. open th i 
> 1 " tabl 
phpMyAdmin and click the insert tab. d — 


AS RO xar E uo 


Fig. 5.7 Add Content in Database Table 


Enter the desired data in the corresponding fields and click on the Go 
button to store it. We can see the newly inserted record by clicking on the 
browse tab. 


Q.15. Write short note on debugging in database. o 
Ans. Debugging is the process of detecting and removing of existing and 
potential errors (also called as ‘bugs’) in a software code that can cause it to 


event incorrect operation of a software 


behave unexpectedly or crash. To pr V 
ing i d to find and resolve bugs or defects. When various 
e aen. i led, debugging becomes harder as any 


subsystems or modules are tightly coup! D er as 
other. Sometimes 
change in one module may cause more bugs to appear in anoth t 


i i it. Ac 
it takes more time to debug a program than to code it. i 


Se 


7 debug in database. 
Q.16. Explain the process of 
tart with a problem, isolate the 
Ans. To debug a program, user has to s 
source code of the problem, and then fix it. A user of a program must know 
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how to fix the problem as knowledge about problem anal 
When the bug is fixed, then the software is ready to use, Debugging tools 
(called debuggers) are used to identify coding errors at various development 
stages. They are used to reproduce the conditions in which error has occurred, 
then examine the program state at that time and locate the cause, Programmers 
can trace the program execution step-by-step by evaluating the value of variables 
and stop the execution wherever required to get the value of variables or reset 
the program variables. Some programming language packages provide a 
debugger for checking the code for errors while it is being written at run time. 

The debugging process are — 


(i) Reproduce the problem. 


(ii) Describe the bu 
the exact reason. 


ysis is Expected, 


g. Try to get as much input from the user to get 


(iii) Capture the program snapshot when th 


€ bug appears. Try to 
get all the variable values 


and states of the program at that time. 


(iv) Analyse the snapshot based on the state and action. Based on 
that try to find the cause of the bug. 


(v) Fix the existing bug, but also check that any new bug does not 
occur, 


